CSS Grid Layout

CSS grid

CSS Grid je specifikace (sada vlasností), která umožňuje tvořit layout pomocí pravidelné, dvoudimenzionální mřížky. Tato mřížka se nazývá grid a je možné do ní umísťovat prvky. Element, který takto mřížkou rozdělíme, se nazývá grid kontejner. Ten je rozdělen na jednotlivé řádky a sloupce, které se skládají z buněk.

Vytvoření mřížky

Mřížku vytvoříme jednoduše: vybereme kontejner a nastavíme mu vlastnost display na hodnotu grid (případně inline-grid). Pro plnohodnotné vytvoření mřížky ale musíme specifikovat počet sloupců a řádků a také jejich velikost. Pro řádky uvádíme jejich výšku, pro sloupce jejich šířku. Příklad jednoduché mřížky následuje:

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

Takto jsme vytvořili mřížku s přesně danou výškou řádku a šířkou sloupců. Tento přístup má ale tu nevýhodu, že layout je pevný a nereaguje na změnu velikosti obrazovky. Lepší flexibilitu získáme, pokud použijeme relativní jednotky, například %, kdy se šířka sloupců počítá z kontejneru, nebo fr, která rozdělí dostupný prostor mezi sloupce podle zadaných poměrů. Například místo pevného 100px 200px 100px můžeme použít 20% 60% 20% nebo 1fr 2fr 1fr, což zajistí, že mřížka zůstane proporčně správná i při změně šířky okna. Je ale potřeba myslet na to, že tyto jednotky jsou relativní – jejich výsledná velikost se odvíjí od velikosti rodičovského kontejneru a dostupného prostoru v mřížce.

Kromě uvedených jednotek můžeme použít i další hodnoty, například minmax(), min-content, max-content nebo auto. Ty umožňují přizpůsobit velikost řádků a sloupců podle obsahu nebo nastavit jejich minimální a maximální rozměry. Konkrétní řešení vždy závisí na tom, jaký obsah chceme do mřížky umístit a jakého výsledného rozložení chceme dosáhnout.

Při definování většího počtu řádků nebo sloupců by bylo nepraktické vypisovat stejnou hodnotu stále dokola. Proto můžeme použít funkci repeat(), která umožňuje určit, kolikrát se má určitý vzor v mřížce opakovat. Například zápis:

grid-template-columns: repeat(4, 1fr);

vytvoří čtyři stejně široké sloupce. Funkce repeat() navíc umožňuje používat speciální hodnoty auto-fill nebo auto-fit. Hodnota auto-fill automaticky vytvoří tolik sloupců, kolik se jich vejde do kontejneru při zachování zadané minimální velikosti. To se často kombinuje například s funkcí minmax(), takže mřížka může automaticky přidávat nebo ubírat sloupce podle dostupného prostoru. Díky tomu lze velmi snadno vytvořit flexibilní layouty, které se přizpůsobují velikosti obrazovky

Umístění prvků do mřížky

Nyní už umíme vytvořit mřížku. Pojďme si nyní ukázat, jak do mřížky umístit jednotlivé prvky.

Umístění prvků v CSS Gridu může probíhat automaticky nebo ručně. Pokud prvkům explicitně neřekneme, kam patří, prohlížeč je do mřížky umístí automaticky v pořadí, v jakém jsou napsány v HTML kódu. Postup je jednoduchý. Prohlížeč začne v levém horním rohu a postupně umisťuje prvky do řádku. Pokud už v řádku není volná buňka, pokračuje na další řádek.

Ne vždy ale chceme umístit prvky do mřížky v takto definovaném pořadí. Některé prvky mohou mít jinou šířku nebo začínat na rozdílných indexech. Tyto prvky musíme umístit ručně pomocí vlastností grid-column a grid-row, které nám říkají, do kterého sloupce nebo řádku chceme prvek vložit. Každou z těchto vlastností lze také "rozdělit" na dvě vlasnosti: grid-column-start a grid-column-end určují začátek a konec sloupce, zatímco grid-row-start a grid-row-end určují začátek a konec řádku. Tak lze přesně definovat, kde se prvek v mřížce objeví a kolik sloupců nebo řádků zabere. Například zápis grid-column: 1 / 3; znamená, že prvek začne na první čáře sloupců a skončí na třetí čáře, tedy zabírá dva sloupce.

Pojmenování oblastí

Aby se nám s mřížkou lépe pracovalo, protože si ne vždy pamatujeme čísla řádků a sloupců, můžeme jednotlivé části layoutu pojmenovat. Každá oblast může mít vlastní název, například header, sidebar, content nebo footer, a zápis rozložení pak připomíná vizuální náčrt stránky. Prvky do těchto oblastí přiřazujeme pomocí vlastnosti grid-area, která určuje, do které pojmenované oblasti mají patřit. Tento přístup je velmi užitečný pro složitější layouty, protože umožňuje rychle měnit rozložení, přesouvat prvky nebo upravovat mřížku, aniž bychom museli složitě počítat čáry – kód je tak čitelnější a lépe udržovatelný.

.box {
    display: grid;
    grid-template-rows: 100px 200px 200px 100px;
    grid-template-columns: 200px 100px 200px;
    grid-template-areas:
        "header header header"
        "main main aside"
        "main main aside"
        "footer footer footer"
}

Ve velmi podobném duchu lze pojmenovat i čáry pomocí hranatých závorek, například:

grid-template-columns: [start] 1fr [middle] 2fr [end];

To umožňuje odkazovat se na jednotlivé čáry pomocí jména a ne jejich indexů.