Alla vanliga CSS grid-egenskaper, grupperade efter var de används: containern, elementet och storleksenheterna. Varje rad parar egenskapen med dess vanliga värden.
Grid placerar element i två dimensioner: rader och kolumner samtidigt. Sätt display: grid på föräldern, definiera spår med grid-template-columns och grid-template-rows och placera barnen i celler. Använd grid för sid- och kortlayouter; använd flexbox för endimensionella rader. De två kombineras fritt.
Referenstabell · 33 poster
CSS GridExplained
33 of 33 rows
Container
grid | inline-grid
Gör om elementet till en grid-container.
1fr 1fr | repeat(3, 1fr) | 200px 1fr
Definierar kolumnerna och deras bredder.
auto 1fr auto
Definierar raderna och deras höjder.
[main-start] 1fr [main-end]
Ger grid-linjer namn i en mall och placerar element efter dessa namn.
1rem | 8px 16px
Utrymme mellan rader och kolumner.
"header header" "nav main"
Ger cellerna namn för läsbar placering.
"head head" 64px "nav main" 1fr / 200px 1fr
Sätter rader, kolumner och områden i en förkortning.
repeat(2, 1fr) / auto-flow 80px
Sätter alla spåregenskaper och grid-auto-flow i en deklaration.
minmax(80px, auto)
Sätter höjden på rader som mallen inte definierar.
120px | minmax(0, 1fr)
Sätter bredden på kolumner som mallen inte definierar.
row | column | row dense
Väljer axeln för oplacerade element; dense fyller tidigare luckor.
start | center | end | stretch
Justerar varje element i sin cell längs radaxeln.
start | center | end | stretch
Justerar varje element i sin cell längs kolumnaxeln.
center | start end
Sätter align-items och justify-items i en deklaration.
start | center | space-between
Justerar spårrutnätet inuti containern längs radaxeln.
start | center | space-between
Justerar spårrutnätet inuti containern längs kolumnaxeln.
center | end start
Sätter align-content och justify-content i en deklaration.
Element
1 / 3 | span 2
Placerar ett element över kolumner eller sträcker det över flera.
1 / 2 | span 3
Placerar ett element över rader eller sträcker det över flera.
grid-column: 2 / -1
Räknar linjer från slutet av rutnätet; -1 är sista linjen.
header | 1 / 1 / 2 / 3
Namnger eller placerar ett element fullt ut i en förkortning.
start | center | end | stretch
Justerar bara detta element i sin cell längs radaxeln.
start | center | end | stretch
Justerar bara detta element i sin cell längs kolumnaxeln.
center | start end
Sätter align-self och justify-self i en deklaration.
Storleksenheter
1fr | 2fr
En bråkdel av det lediga utrymmet i spåret.
auto | 1fr auto
Storleksätter ett spår efter innehållet; justering kan sträcka det.
min-content | max-content
Storleksätter ett spår efter det minsta eller största innehållet.
fit-content(180px)
Storleksätter ett spår efter innehållet, men aldrig förbi den givna gränsen.
minmax(200px, 1fr)
Begränsar ett spår mellan ett minimum och ett maximum.
repeat(4, 1fr)
Upprepar ett spårmönster utan att skriva ut varje spår.
repeat(auto-fit, minmax(120px, 1fr))
Lägger till så många spår som får plats; auto-fit fäller ihop tomma spår.
grid-template-columns: subgrid
Får ett nästlat rutnät att dela förälderns spår och linjenamn.
grid-template-rows: masonry
Experimentellt: packar element i kolumner efter höjd i stället för fasta rader.