Alle almindelige CSS grid-egenskaber, grupperet efter hvor de gælder: containeren, elementet og størrelsesenhederne. Hver række parrer egenskaben med dens almindelige værdier.
Grid placerer elementer i to dimensioner: rækker og kolonner på én gang. Sæt display: grid på forældreelementet, definér spor med grid-template-columns og grid-template-rows, og placér børn i celler. Brug grid til side- og kortlayout; brug flexbox til endimensionale bjælker. De to kan frit kombineres.
Referencetabel · 33 poster
CSS GridExplained
33 of 33 rows
Container
grid | inline-grid
Gør elementet til en grid-container.
1fr 1fr | repeat(3, 1fr) | 200px 1fr
Definerer kolonnerne og deres bredde.
auto 1fr auto
Definerer rækkerne og deres højde.
[main-start] 1fr [main-end]
Navngiver gridlinjer i en skabelon og placerer elementer efter disse navne.
1rem | 8px 16px
Mellemrum mellem rækker og kolonner.
"header header" "nav main"
Navngiver celler til læsbar placering.
"head head" 64px "nav main" 1fr / 200px 1fr
Sætter rækker, kolonner og områder i én forkortelse.
repeat(2, 1fr) / auto-flow 80px
Sætter alle sporegenskaber og grid-auto-flow i én deklaration.
minmax(80px, auto)
Sætter højden på rækker, som skabelonen ikke definerer.
120px | minmax(0, 1fr)
Sætter bredden på kolonner, som skabelonen ikke definerer.
row | column | row dense
Vælger aksen for ikke-placerede elementer; dense udfylder tidligere huller.
start | center | end | stretch
Justerer hvert element i dets celle langs rækkeaksen.
start | center | end | stretch
Justerer hvert element i dets celle langs kolonneaksen.
center | start end
Sætter align-items og justify-items i én deklaration.
start | center | space-between
Justerer sporgridet i containeren langs rækkeaksen.
start | center | space-between
Justerer sporgridet i containeren langs kolonneaksen.
center | end start
Sætter align-content og justify-content i én deklaration.
Element
1 / 3 | span 2
Placerer et element i kolonner eller lader det spænde over dem.
1 / 2 | span 3
Placerer et element i rækker eller lader det spænde over dem.
grid-column: 2 / -1
Tæller linjer fra enden af gridet; -1 er den sidste linje.
header | 1 / 1 / 2 / 3
Navngiver eller placerer et element fuldt ud i én forkortelse.
start | center | end | stretch
Justerer netop dette element i dets celle langs rækkeaksen.
start | center | end | stretch
Justerer netop dette element i dets celle langs kolonneaksen.
center | start end
Sætter align-self og justify-self i én deklaration.
Størrelsesenheder
1fr | 2fr
En brøkdel af den frie plads i sporet.
auto | 1fr auto
Størrelsessætter et spor efter dets indhold; justering kan strække det.
min-content | max-content
Størrelsessætter et spor efter dets mindste eller største indhold.
fit-content(180px)
Størrelsessætter et spor efter dets indhold, men aldrig over den givne grænse.
minmax(200px, 1fr)
Begrænser et spor mellem et minimum og et maksimum.
repeat(4, 1fr)
Gentager et spormønster uden at skrive hvert enkelt.
repeat(auto-fit, minmax(120px, 1fr))
Tilføjer så mange spor, som der er plads til; auto-fit sammenfolder de tomme.
grid-template-columns: subgrid
Lader et indlejret grid dele forælderens spor og linjenavne.
grid-template-rows: masonry
Eksperimentelt: pakker elementer i kolonner efter højde i stedet for faste rækker.