Každá běžná vlastnost CSS gridu, seskupená podle toho, kde platí: kontejner, položka a jednotky velikosti. Každý řádek spojuje vlastnost s jejími běžnými hodnotami.
Grid rozvrhuje prvky ve dvou dimenzích: řádky a sloupce najednou. Nastavte na rodiči display: grid, definujte stopy pomocí grid-template-columns a grid-template-rows a umístěte potomky do buněk. Používejte grid pro rozvržení stránek a karet a flexbox pro jednorozměrné pruhy. Obojí se dá volně kombinovat.
Referenční tabulka · 33 položek
CSS GridExplained
33 of 33 rows
Kontejner
grid | inline-grid
Změní prvek na grid kontejner.
1fr 1fr | repeat(3, 1fr) | 200px 1fr
Definuje sloupce a jejich šířky.
auto 1fr auto
Definuje řádky a jejich výšky.
[main-start] 1fr [main-end]
Pojmenuje linky gridu v šabloně a umísťuje položky podle těchto názvů.
1rem | 8px 16px
Mezera mezi řádky a sloupci.
"header header" "nav main"
Pojmenuje buňky pro čitelnější umísťování.
"head head" 64px "nav main" 1fr / 200px 1fr
Nastaví řádky, sloupce a oblasti v jednom zkráceném zápisu.
repeat(2, 1fr) / auto-flow 80px
Nastaví všechny vlastnosti stop a grid-auto-flow v jedné deklaraci.
minmax(80px, auto)
Nastaví výšku řádků, které šablona nedefinuje.
120px | minmax(0, 1fr)
Nastaví šířku sloupců, které šablona nedefinuje.
row | column | row dense
Zvolí osu pro neumístěné položky; dense doplňuje dřívější mezery.
start | center | end | stretch
Zarovná každou položku v její buňce podél osy řádků.
start | center | end | stretch
Zarovná každou položku v její buňce podél osy sloupců.
center | start end
Nastaví align-items a justify-items v jedné deklaraci.
start | center | space-between
Zarovná mřížku stop v kontejneru podél osy řádků.
start | center | space-between
Zarovná mřížku stop v kontejneru podél osy sloupců.
center | end start
Nastaví align-content a justify-content v jedné deklaraci.
Položka
1 / 3 | span 2
Umístí položku do sloupců nebo ji přes ně roztáhne.
1 / 2 | span 3
Umístí položku do řádků nebo ji přes ně roztáhne.
grid-column: 2 / -1
Počítá linky od konce gridu; -1 je poslední linka.
header | 1 / 1 / 2 / 3
Pojmenuje nebo úplně umístí položku v jednom zkráceném zápisu.
start | center | end | stretch
Zarovná jen tuto položku v její buňce podél osy řádků.
start | center | end | stretch
Zarovná jen tuto položku v její buňce podél osy sloupců.
center | start end
Nastaví align-self a justify-self v jedné deklaraci.
Jednotky velikosti
1fr | 2fr
Podíl volného místa ve stopě.
auto | 1fr auto
Dimenzuje stopu podle jejího obsahu; zarovnání ji může roztáhnout.
min-content | max-content
Dimenzuje stopu podle nejmenšího nebo největšího obsahu.
fit-content(180px)
Dimenzuje stopu podle jejího obsahu, ale nikdy přes zadaný strop.
minmax(200px, 1fr)
Omezí stopu mezi minimum a maximum.
repeat(4, 1fr)
Opakuje vzor stop bez psaní každé zvlášť.
repeat(auto-fit, minmax(120px, 1fr))
Přidá tolik stop, kolik se vejde; auto-fit smrskne prázdné.
grid-template-columns: subgrid
Vnořený grid sdílí stopy a názvy linek rodiče.
grid-template-rows: masonry
Experimentální: balí položky do sloupců podle výšky místo pevných řádků.