Layout stránky
Ukázky z výkladu si celý dnešek budeme zkoušet na CodePenu. Otevřete si připravený zápis s deseti očíslovanými čtverci a nechte si ho po ruce – co uvidíte v ukázce, můžete do něj rovnou přepsat a hned se podívat, co to udělá.
Layout neboli rozvržení stránky se dá v CSS řešit třemi způsoby a každý z nich řeší něco jiného. Než se pustíme do vlastností, které většina z nás ještě nepoužívala, srovnáme si, co už máme v ruce.
| Způsob | Rozměr | Na co se hodí |
|---|---|---|
| Normální tok | – | text, odstavce, výchozí chování stránky |
| Flexbox | jeden (řádek nebo sloupec) | navigace, řádek tlačítek, obsah karty |
| Grid | dva (řádky i sloupce naráz) | rozvržení celé stránky, galerie, formulář |
Normální tok
Normální tok je to, co stránka dělá sama od sebe, dokud jí nic jiného neřekneme. Blokové prvky se skládají pod sebe přes celou šířku, řádkové vedle sebe a text se zalamuje. Pro článek nebo dokumentaci to bohatě stačí – proto je normální tok pořád nejlepší volba všude, kde nepotřebujeme prvky rozmístit jinak, než jak jdou za sebou v HTML.
Flexbox: jeden rozměr
Flexbox rozděluje místo v jedné řadě. Řekneme mu směr, a on se pak stará o to, kdo z prvků se roztáhne, kdo se smrskne a jak zbytek zarovnat. Přesně to chceme u navigace, u řádku tlačítek nebo uvnitř karty.
Co Flexbox neumí, je srovnat prvky i do sloupců. Když má být druhá položka v každém řádku stejně široká jako ta v řádku prvním, Flexbox o tom nic neví – každý řádek si počítá zvlášť.
Grid: dva rozměry naráz
Grid pracuje s řádky i sloupci současně, a hlavně obráceným postupem než Flexbox. Ve Flexboxu popisujeme, jak se prvky poperou o místo v jedné řadě; mřížku (grid) naopak nejdřív nakreslíme a prvky do ní teprve posadíme.
Tenhle rozdíl stojí za zapamatování, protože z něj plyne odpověď na otázku „grid, nebo Flexbox?“. Když víme, jak má rozvržení vypadat, sáhneme po gridu. Když nás zajímá jen to, jak si prvky rozeberou jednu řadu, stačí Flexbox.
Co dnes přidáme
Tři sloupce a mezera jsou u gridu teprve začátek. Dnes k nim přidáme čtyři věci, které z mřížky dělají nástroj na celou stránku:
- Linie a souřadnice – čím se v mřížce odkazujeme na místo.
- Pojmenované oblasti – rozvržení nakreslené jmény, čitelné na první pohled.
- Implicitní mřížku a automatické umisťování – co se stane s prvky, pro které jsme místo nenaplánovali.
- Responzivitu bez media queries – mřížku, která si počet sloupců spočítá sama.
Grid má hodně vlastností a málokdo je nosí v hlavě všechny. Nejlepší přehled, ke kterému se dá vracet, je A Complete Guide to CSS Grid na CSS-Tricks – u každé vlastnosti je obrázek toho, co dělá. Otevřete si ho vedle a během lekce do něj nahlížejte.
Otevřete si vývojářské nástroje prohlížeče, v záložce Elements najděte prvek
s display: grid a klikněte na odznak grid vedle něj. Prohlížeč nakreslí
mřížku i s čísly linií přímo přes stránku. Je to nejrychlejší způsob, jak
zjistit, proč prvek sedí jinde, než jsme čekali – a dnes ho budeme potřebovat.