Alle vanlige CSS grid-egenskaper, gruppert etter hvor de gjelder: containeren, elementet og størrelsesenhetene. Hver rad kobler egenskapen til sine vanlige verdier.
Grid ordner elementer i to dimensjoner: rader og kolonner samtidig. Sett display: grid på forelderen, definer spor med grid-template-columns og grid-template-rows, og plasser barna i celler. Bruk grid til side- og kortoppsett; bruk flexbox til endimensjonale linjer. De to kombineres fritt.
Referansetabell · 33 oppføringer
CSS GridExplained
33 of 33 rows
Container
grid | inline-grid
Gjør elementet om til en grid-container.
1fr 1fr | repeat(3, 1fr) | 200px 1fr
Definerer kolonnene og breddene deres.
auto 1fr auto
Definerer radene og høydene deres.
[main-start] 1fr [main-end]
Gir grid-linjer navn i en mal og plasserer elementer etter disse navnene.
1rem | 8px 16px
Mellomrom mellom rader og kolonner.
"header header" "nav main"
Gir cellene navn for lesbar plassering.
"head head" 64px "nav main" 1fr / 200px 1fr
Setter rader, kolonner og områder i én kortform.
repeat(2, 1fr) / auto-flow 80px
Setter alle spor-egenskapene og grid-auto-flow i én deklarasjon.
minmax(80px, auto)
Setter høyden på rader som malen ikke definerer.
120px | minmax(0, 1fr)
Setter bredden på kolonner som malen ikke definerer.
row | column | row dense
Velger aksen for uplasserte elementer; dense fyller tidligere hull.
start | center | end | stretch
Justerer hvert element i cellen sin langs radaksen.
start | center | end | stretch
Justerer hvert element i cellen sin langs kolonneaksen.
center | start end
Setter align-items og justify-items i én deklarasjon.
start | center | space-between
Justerer spor-rutenettet inne i containeren langs radaksen.
start | center | space-between
Justerer spor-rutenettet inne i containeren langs kolonneaksen.
center | end start
Setter align-content og justify-content i én deklarasjon.
Element
1 / 3 | span 2
Plasserer et element i kolonner eller strekker det over flere.
1 / 2 | span 3
Plasserer et element i rader eller strekker det over flere.
grid-column: 2 / -1
Teller linjer fra slutten av rutenettet; -1 er siste linje.
header | 1 / 1 / 2 / 3
Gir elementet navn eller plasserer det fullt ut i én kortform.
start | center | end | stretch
Justerer bare dette elementet i cellen sin langs radaksen.
start | center | end | stretch
Justerer bare dette elementet i cellen sin langs kolonneaksen.
center | start end
Setter align-self og justify-self i én deklarasjon.
Størrelsesenheter
1fr | 2fr
En brøkdel av den ledige plassen i sporet.
auto | 1fr auto
Størrelsessetter et spor etter innholdet; justering kan strekke det.
min-content | max-content
Størrelsessetter et spor etter det minste eller største innholdet.
fit-content(180px)
Størrelsessetter et spor etter innholdet, men aldri over grensen som er gitt.
minmax(200px, 1fr)
Begrenser et spor mellom et minimum og et maksimum.
repeat(4, 1fr)
Gjentar et spormønster uten å skrive hvert spor for seg.
repeat(auto-fit, minmax(120px, 1fr))
Legger til så mange spor som det er plass til; auto-fit slår sammen tomme spor.
grid-template-columns: subgrid
Får et nestet rutenett til å dele sporene og linenavnene til forelderen.
grid-template-rows: masonry
Eksperimentelt: pakker elementer i kolonner etter høyde i stedet for faste rader.