Generatore CSS Grid
Crea layout grid visivamente — configura colonne, righe e gap, disegna celle cliccando o trascinando.
① Imposta colonne & righe e le dimensioni dei track ② Clicca le celle per aggiungere item e trascina per span ③ Copia il CSS
Colonne
Righe
Gap colonne (px)
16
Gap righe (px)
16
Col
C1
C2
C3
Riga
R1
R2
R3
Preview
CSS generato
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
column-gap: 16px;
row-gap: 16px;
}Come usare CSS Grid
CSS Grid è un sistema di layout bidimensionale per controllare colonne e righe contemporaneamente. Usa le unità fr per distribuire lo spazio proporzionalmente, px per dimensioni fisse, % per dimensioni relative e auto per adattarsi al contenuto. La proprietà gap aggiunge spaziatura uniforme. Definisci gli item con grid-column e grid-row usando i numeri di linea start / end.
Domande frequenti
CSS Grid Layout è un sistema di layout bidimensionale integrato nei browser. A differenza di Flexbox (che opera su un asse), Grid permette di definire righe e colonne esplicite e posizionare gli item in qualsiasi punto della griglia, abilitando layout complessi con codice minimale.
fr sta per "fractional unit" (unità frazionaria). Rappresenta una frazione dello spazio disponibile nel contenitore griglia dopo la risoluzione dei tracciati fissi e auto. Ad esempio, grid-template-columns: 1fr 2fr 1fr crea tre colonne dove quella centrale è larga il doppio delle altre.
Usa auto quando vuoi che una colonna o riga si adatti al suo contenuto. Usa fr per riempire lo spazio rimanente proporzionalmente. Combinandoli — es. auto 1fr — crei una sidebar che si adatta al contenuto mentre l'area principale occupa tutta la larghezza rimanente.
gap è la shorthand per entrambi column-gap e row-gap. Puoi scrivere gap: 16px per impostarli entrambi, o gap: 16px 24px per row-gap prima e column-gap dopo. Sostituiscono il vecchio grid-gap ora deprecato.
grid-column: 1 / 3 posiziona un item dalla linea 1 alla linea 3, coprendo 2 colonne. In alternativa, grid-column: span 2 copre 2 colonne dal punto di posizionamento. Questo generatore usa la sintassi start / end per un controllo esplicito.
Sì. CSS Grid è supportato in tutti i browser moderni dal 2017 (Chrome 57, Firefox 52, Safari 10.1, Edge 16). Puoi usarlo in produzione senza fallback per qualsiasi target di browser moderno.
Questo generatore supporta fino a 12 colonne e 8 righe, coprendo la grande maggioranza dei layout reali. CSS stesso non ha limiti rigidi — puoi definire quanti tracciati vuoi nel codice di produzione.