Kontejner a položky mřížky

V minulé lekci jsme pomocí flexboxu skládali prvky v jednom směru: do řady, nebo do sloupce. Mnoho rozvržení ale potřebuje oba směry najednou: galerie fotek, sada karet nebo celá stránka se záhlavím, menu, obsahem a zápatím. Na to má CSS rozvržení pomocí mřížky (anglicky grid), kterému se říká CSS Grid. Skládá prvky do řádků a sloupců zároveň, trochu jako tabulka.

Pro tuto lekci jsme připravili novou verzi stránky o kočce. Má záhlaví, menu, popis a šest karet s kočičími plemeny. Karty jsou v prvku div se třídou karty a každá z nich má třídu karta. Zatím jsou jedna pod druhou.

Mřížka se zapíná podobně jako flexbox: rodičovskému prvku nastavíme display: grid a ten se tím stane kontejnerem mřížky. Jeho děti se stanou položkami mřížky. Opravdu jen děti, ne jejich další potomci: nadpisy a odstavce uvnitř karet položkami mřížky nejsou, zůstávají ve svých kartách.

Potom určíme, jaké sloupce mřížka bude mít. K tomu slouží vlastnost grid-template-columns (šablona sloupců). Její hodnotou je seznam šířek sloupců oddělených mezerami a každá šířka vytvoří jeden sloupec:

.karty {
	display: grid;
	grid-template-columns: 200px 100px;
}

Tato mřížka má dva sloupce: první je široký 200 pixelů a druhý 100 pixelů. Položky mřížku vyplňují v pořadí, v jakém jsou v HTML: zleva doprava, a když je řádek plný, pokračují na dalším. Prohlížeč vytvoří tolik řádků, kolik je potřeba, a každý řádek bude tak vysoký, jak vyžaduje jeho obsah. (Řádky se dají nastavit i ručně vlastností grid-template-rows, obvykle je ale necháme vytvořit prohlížeč.)

Na obrázku je mřížka se třemi sloupci a dvěma řádky. Místu, kde se řádek potká se sloupcem, říkáme buňka a každá položka zabírá jednu buňku. Očíslované čáry mezi sloupci a řádky jsou čáry mřížky. Budeme je potřebovat později v této lekci.