Convertitore gratuito
Griglia CSS Generatore di layout
Genera visivamente layout di griglia CSS con anteprima dal vivo. Regola le colonne del modello griglia, le righe, lo spazio, gli elementi giustificati, gli elementi allineati e altro ancora: gratuitamente e lato client.
Anteprima dal vivo
1
2
3
4
5
6
Colonne (repeat(3, 1fr))
Righe (repeat(2, 1fr))
gap di colonna (12px)
0px16px32px
spazio tra le righe (12px)
0px16px32px
giustificare gli elementi
allineare-elementi
Uscita CSS
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
column-gap: 12px;
row-gap: 12px;
justify-items: stretch;
align-items: stretch;
}
.item {
padding: 1rem;
border-radius: 8px;
font-weight: 600;
font-size: 0.9rem;
text-align: center;
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
}