Alle gangbare CSS grid-eigenschappen, gegroepeerd op plaats van toepassing: de container, het item en de maateenheden. Elke rij koppelt de eigenschap aan de gangbare waarden.
Grid legt elementen in twee dimensies uit: rijen en kolommen tegelijk. Zet display: grid op de ouder, definieer sporen met grid-template-columns en grid-template-rows, en plaats kinderen in cellen. Gebruik grid voor pagina- en kaartlayouts; gebruik flexbox voor eendimensionale balken. De twee combineren vrij.
Referentietabel · 33 items
CSS GridExplained
33 of 33 rows
Container
grid | inline-grid
Maakt van het element een gridcontainer.
1fr 1fr | repeat(3, 1fr) | 200px 1fr
Definieert de kolommen en hun breedtes.
auto 1fr auto
Definieert de rijen en hun hoogtes.
[main-start] 1fr [main-end]
Geeft gridlijnen namen in een template en plaatst items op die namen.
1rem | 8px 16px
Ruimte tussen rijen en kolommen.
"header header" "nav main"
Geeft cellen namen voor leesbare plaatsing.
"head head" 64px "nav main" 1fr / 200px 1fr
Zet rijen, kolommen en gebieden in één shorthand.
repeat(2, 1fr) / auto-flow 80px
Zet elke sporeigenschap en grid-auto-flow in één declaratie.
minmax(80px, auto)
Zet de hoogte van rijen die de template niet definieert.
120px | minmax(0, 1fr)
Zet de breedte van kolommen die de template niet definieert.
row | column | row dense
Kiest de as voor ongeplaatste items; dense vult eerdere gaten.
start | center | end | stretch
Lijnt elk item binnen zijn cel uit langs de rijas.
start | center | end | stretch
Lijnt elk item binnen zijn cel uit langs de kolomas.
center | start end
Zet align-items en justify-items in één declaratie.
start | center | space-between
Lijnt het sporenraster binnen de container uit langs de rijas.
start | center | space-between
Lijnt het sporenraster binnen de container uit langs de kolomas.
center | end start
Zet align-content en justify-content in één declaratie.
Item
1 / 3 | span 2
Plaatst een item in kolommen of laat het meerdere kolommen overspannen.
1 / 2 | span 3
Plaatst een item in rijen of laat het meerdere rijen overspannen.
grid-column: 2 / -1
Telt lijnen vanaf het einde van het raster; -1 is de laatste lijn.
header | 1 / 1 / 2 / 3
Benoemt of volledig plaatst een item in één shorthand.
start | center | end | stretch
Lijnt alleen dit item binnen zijn cel uit langs de rijas.
start | center | end | stretch
Lijnt alleen dit item binnen zijn cel uit langs de kolomas.
center | start end
Zet align-self en justify-self in één declaratie.
Maateenheden
1fr | 2fr
Een fractie van de vrije ruimte in het spoor.
auto | 1fr auto
Maat een spoor naar de inhoud; uitlijning kan het oprekken.
min-content | max-content
Maat een spoor naar de kleinste of grootste inhoud.
fit-content(180px)
Maat een spoor naar de inhoud, maar nooit voorbij de opgegeven limiet.
minmax(200px, 1fr)
Begrenst een spoor tussen een minimum en een maximum.
repeat(4, 1fr)
Herhaalt een spoorpatroon zonder elk spoor apart te typen.
repeat(auto-fit, minmax(120px, 1fr))
Voegt zoveel sporen toe als er passen; auto-fit klapt lege samen.
grid-template-columns: subgrid
Laat een genest raster de sporen en lijnnamen van de ouder delen.
grid-template-rows: masonry
Experimenteel: pakt items in kolommen op hoogte in plaats van vaste rijen.