#1 Rozložení typu grid
Rozložení grid, česky mřížka, je typ rozložení, které spočívá v rozčlenění prvku na mřížku a následné ukládání prvků do částí mřížky, do jednotlivých buněk.
Jedná se o druhý nejčastěji používaný typ rozložení, hned po flexboxu; také se zapisuje do vlastnosti display, tedy display: grid;
#2 Základy
Rozložení typu grid se přiděluje hodnotou grid (případně inline-grid pro prvek, který má být inline) do vlastnosti display.
#mrizka {
display: grid;
}
Mřížka se skládá z dvou částí – kontejneru, který se dále rozděluje na sloupce, řádky a mezery, a položky, tedy vnořené prvky.
Sloupce, v CSS jako columns, je vertikální rozdělení kontejneru na úseky, zatímco řádky, anglicky rows, dělí kontejner na horizontální úseky. Mezi jednotlivé řádky i sloupce lze nastavit mezery pomocí vlastností – column-gap (pro sloupce) a row-gap (pro řádky), případně je lze zkombinovat do zkrácené vlastnosti gap.
Mezi jednotlivými políčky v mřížce se nacházejí také imaginární linky, anglicky lines, které označují začátky a konce prvku na obou osách mřížky. Pokud chceme, aby prvek začínal v druhém řádku a končil ve čtvrtém, použijeme následující kód:
#prvek {
grid-column-start: 2;
grid-column-end: 5;
}
Na první pohled se může zdát, že prvek se bude rozpínat od druhého do pátého řádku, avšak prvek se rozpíná od druhé do páté linky, tedy na řádcích 2, 3 a 4, které se nacházejí mezi linkami 2 a 5.
#3 Kontejner
Grid kontejner, nebo-li obal mřížky, je prvek, který seskupuje prvky, na které chceme rozložení grid aplikovat. Základní vlastností je display: flex;, která na prvek aplikuje grid. Dále se kontejneru přidělují vlastnosti, které určují jeho chování:
- column-gap – definuje velikost mezery mezi sloupci
- gap – zkrácená vlastnost pro mezery mezi řádky a sloupci
- grid – zkrácená vlastnost pro grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns a grid-auto-flow
- grid-auto-columns – definuje automatickou velikost sloupce
- grid-auto-flow – definuje, jak se vnořené prvky vkládají do mřížky
- grid-auto-rows – definuje automatickou velikost řádků
- grid-template – zkrácená vlastnost pro vlastnosti grid-template-rows, grid-template-columns a grid-areas
- grid-template-areas – specifikuje, jak zobrazovat řádky a sloupce
- grid-template-columns – definuje kolik a jak velké budou sloupce v mřížce
- grid-template-rows – definuje kolik a jak velké budou řádky v mřížce
- row-gap – definuje velikost mezery mezi řádky
grid-template-*
Vlastnosti s prefixem grid-template jsou nejčastěji používanými vlastnostmi pro nastavení rozložení prvků v mřížce.
Vlastnost grid-template-columns definuje počet sloupců a velikost každého sloupce v mřížce. Její hodnotou může být „nekonečný“ seznam číselných i slovních hodnot, které vyjadřují šířky sloupců (a zároveň se počtem deklarací zvyšuje také počet sloupců). V následujícím příkladě se vytvoří dvě mřížky – jedna 4 sloupci, z nichž každý má jiné rozměry a druhá se třema sloupci se stejnými.
#mrizka1 {
display: grid;
grid-template-columns: 150px 30px 50px 80px;
}
#mrizka2 {
display: grid;
grid-template-columns: 60px 60px 60px;
}
Pro zjednodušení práce, lze použít funkci repeat(), která opakuje n-krát výraz. Předchozí kód pro prvek s identifikátorem #mrizka2 lze nahradit tímto:
#mrizka2 {
display: grid;
grid-template-columns: repeat(3, 60px);
/* Zopakuje 3krát 60 pixelů */
}
Totožně to také funguje (jak samostatné hodnoty, tak funkce repeat()) pro vlastnost grid-template-rows, která definuje řádky.
#4 Položky
Položky u rozložení typu grid označují prvky, které se nacházejí v prvku, který má vlastnost display: grid;. Samotné položky lze také stylovat, aby se přizpůsobovali vně kontejneru. Mohou mít následující vlastnosti:
- grid-area – specifikuje jméno pro vnořený prvek nebo se může jednat o zkrácenou vlastnost pro grid-row-start, grid-column-start, grid-row-end a grid-column-end
- grid-column – zkrácená vlastnost pro grid-column-end a grid-column-start
- grid-column-end – definuje konec prvku v sloupci
- grid-column-start – definuje počátek prvku v sloupci
- grid-row – zkrácená vlastnost pro grid-row-end a grid-row-start
- grid-row-end – definuje konec prvku v řádku
- grid-row-start – definuje počátek prvku v řádku
Pozice prvku
Vlastnosti s prefixy grid-column a grid-row ovládají pozici prvku v mřížce na obou osách. Zkrácené stejnojmenné vlastnosti – grid-column a grid-row – slučují jim relativní vlastnosti pomocí lomítka /. Existuje také ještě kratší verze, vlastnost grid-area, která spojuje obě zkrácené verze dohromady (v pořadí – počáteční linka sloupce, počáteční linka řádku, konečná linka sloupce a konečná linka řádku)
V následujícím příkladu je prvek s identifikátorem .prvek, který se bude rozpínat přes 3 políčka na šířku a 4 na výšku, přičemž se bude nacházet na horizontálním středu a o jeden řádek níže pod začátkem mřížky. Použity jsou samostatné vlastnosti:
#mrizky {
display: grid;
grid-template-columns: repeat(5, 100px);
}
.prvek {
grid-column-start: 2;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 6;
}
Prvek s třídou .prvek lze také zapsat takto (pomocí zkrácených vlastností):
.prvek {
grid-column: 2 / 5;
grid-row: 2 / 6;
}
Anebo s vlastností grid-area takto:
.prvek {
grid-area: 2 / 2 / 5 / 6;
}