Tutte le proprietà grid più comuni, raggruppate per punto di applicazione: il contenitore, l'elemento e le unità di dimensionamento. Ogni riga abbina la proprietà ai suoi valori comuni.
Grid dispone gli elementi in due dimensioni: righe e colonne contemporaneamente. Imposta display: grid sul genitore, definisci le tracce con grid-template-columns e grid-template-rows e colloca i figli nelle celle. Usa grid per layout di pagina e card; usa flexbox per barre monodimensionali. I due si combinano liberamente.
Tabella di riferimento · 33 voci
CSS GridExplained
33 of 33 rows
Container
grid | inline-grid
Trasforma l'elemento in un contenitore grid.
1fr 1fr | repeat(3, 1fr) | 200px 1fr
Definisce le colonne e le loro larghezze.
auto 1fr auto
Definisce le righe e le loro altezze.
[main-start] 1fr [main-end]
Dà un nome alle linee della griglia in un template e colloca gli elementi tramite quei nomi.
1rem | 8px 16px
Spazio tra righe e colonne.
"header header" "nav main"
Dà un nome alle celle per un posizionamento leggibile.
"head head" 64px "nav main" 1fr / 200px 1fr
Imposta righe, colonne e aree in un'unica forma abbreviata.
repeat(2, 1fr) / auto-flow 80px
Imposta ogni proprietà di traccia e grid-auto-flow in un'unica dichiarazione.
minmax(80px, auto)
Imposta l'altezza delle righe che il template non definisce.
120px | minmax(0, 1fr)
Imposta la larghezza delle colonne che il template non definisce.
row | column | row dense
Sceglie l'asse per gli elementi non posizionati; dense riempie i vuoti precedenti.
start | center | end | stretch
Allinea ogni elemento dentro la propria cella lungo l'asse delle righe.
start | center | end | stretch
Allinea ogni elemento dentro la propria cella lungo l'asse delle colonne.
center | start end
Imposta align-items e justify-items in un'unica dichiarazione.
start | center | space-between
Allinea la griglia di tracce dentro il contenitore lungo l'asse delle righe.
start | center | space-between
Allinea la griglia di tracce dentro il contenitore lungo l'asse delle colonne.
center | end start
Imposta align-content e justify-content in un'unica dichiarazione.
Item
1 / 3 | span 2
Posiziona o estende un elemento su più colonne.
1 / 2 | span 3
Posiziona o estende un elemento su più righe.
grid-column: 2 / -1
Conta le linee dalla fine della griglia; -1 è l'ultima linea.
header | 1 / 1 / 2 / 3
Nomina o posiziona completamente un elemento in un'unica forma abbreviata.
start | center | end | stretch
Allinea questo singolo elemento dentro la propria cella lungo l'asse delle righe.
start | center | end | stretch
Allinea questo singolo elemento dentro la propria cella lungo l'asse delle colonne.
center | start end
Imposta align-self e justify-self in un'unica dichiarazione.
Unità di dimensionamento
1fr | 2fr
Una frazione dello spazio libero nella traccia.
auto | 1fr auto
Dimensiona una traccia in base al contenuto; l'allineamento può estenderla.
min-content | max-content
Dimensiona una traccia al contenuto più piccolo o più grande.
fit-content(180px)
Dimensiona una traccia in base al contenuto ma mai oltre il limite dato.
minmax(200px, 1fr)
Vincola una traccia tra un minimo e un massimo.
repeat(4, 1fr)
Ripete uno schema di tracce senza digitarle una a una.
repeat(auto-fit, minmax(120px, 1fr))
Aggiunge tutte le tracce che ci stanno; auto-fit comprime quelle vuote.
grid-template-columns: subgrid
Fa condividere a una griglia annidata le tracce e i nomi di linea del genitore.
grid-template-rows: masonry
Sperimentale: impacchetta gli elementi in colonne per altezza invece che in righe fisse.