Wszystkie typowe właściwości CSS grid, pogrupowane według miejsca zastosowania: kontener, element i jednostki rozmiaru. Każdy wiersz łączy właściwość z jej typowymi wartościami.
Grid układa elementy w dwóch wymiarach: wiersze i kolumny jednocześnie. Ustaw display: grid na rodzicu, zdefiniuj ścieżki przez grid-template-columns i grid-template-rows oraz umieść dzieci w komórkach. Używaj grid do układów stron i kart; używaj flexbox do jednowymiarowych pasków. Oba swobodnie się łączą.
Tabela referencyjna · 33 wpisy
CSS GridExplained
33 of 33 rows
Kontener
grid | inline-grid
Zamienia element w kontener grid.
1fr 1fr | repeat(3, 1fr) | 200px 1fr
Definiuje kolumny i ich szerokości.
auto 1fr auto
Definiuje wiersze i ich wysokości.
[main-start] 1fr [main-end]
Nazywa linie siatki w szablonie i umieszcza elementy według tych nazw.
1rem | 8px 16px
Odstęp między wierszami i kolumnami.
"header header" "nav main"
Nazywa komórki dla czytelniejszego rozmieszczania.
"head head" 64px "nav main" 1fr / 200px 1fr
Ustawia wiersze, kolumny i obszary w jednym skrócie.
repeat(2, 1fr) / auto-flow 80px
Ustawia wszystkie właściwości ścieżek i grid-auto-flow w jednej deklaracji.
minmax(80px, auto)
Ustawia wysokość wierszy, których szablon nie definiuje.
120px | minmax(0, 1fr)
Ustawia szerokość kolumn, których szablon nie definiuje.
row | column | row dense
Wybiera oś dla nierozmieszczonych elementów; dense wypełnia wcześniejsze luki.
start | center | end | stretch
Wyrównuje każdy element w jego komórce wzdłuż osi wiersza.
start | center | end | stretch
Wyrównuje każdy element w jego komórce wzdłuż osi kolumny.
center | start end
Ustawia align-items i justify-items w jednej deklaracji.
start | center | space-between
Wyrównuje siatkę ścieżek w kontenerze wzdłuż osi wiersza.
start | center | space-between
Wyrównuje siatkę ścieżek w kontenerze wzdłuż osi kolumny.
center | end start
Ustawia align-content i justify-content w jednej deklaracji.
Element
1 / 3 | span 2
Umieszcza element w kolumnach lub rozciąga go na kilka z nich.
1 / 2 | span 3
Umieszcza element w wierszach lub rozciąga go na kilka z nich.
grid-column: 2 / -1
Liczy linie od końca siatki; -1 to ostatnia linia.
header | 1 / 1 / 2 / 3
Nazywa lub w pełni umieszcza element w jednym skrócie.
start | center | end | stretch
Wyrównuje tylko ten jeden element w jego komórce wzdłuż osi wiersza.
start | center | end | stretch
Wyrównuje tylko ten jeden element w jego komórce wzdłuż osi kolumny.
center | start end
Ustawia align-self i justify-self w jednej deklaracji.
Jednostki rozmiaru
1fr | 2fr
Ułamek wolnej przestrzeni w ścieżce.
auto | 1fr auto
Wymiaruje ścieżkę według zawartości; wyrównanie może ją rozciągnąć.
min-content | max-content
Wymiaruje ścieżkę według najmniejszej lub największej zawartości.
fit-content(180px)
Wymiaruje ścieżkę według zawartości, ale nigdy ponad podany limit.
minmax(200px, 1fr)
Ogranicza ścieżkę między minimum a maksimum.
repeat(4, 1fr)
Powtarza wzorzec ścieżek bez wypisywania każdej z osobna.
repeat(auto-fit, minmax(120px, 1fr))
Dodaje tyle ścieżek, ile się zmieści; auto-fit zwija puste.
grid-template-columns: subgrid
Sprawia, że zagnieżdżona siatka dzieli ścieżki i nazwy linii rodzica.
grid-template-rows: masonry
Eksperymentalne: pakuje elementy w kolumny według wysokości zamiast stałych wierszy.