Lekce 1.1

CSS Grid do hloubky

Linie a souřadnice v mřížce, rozvržení nakreslené jmény oblastí, řádky, které dokreslí prohlížeč, a galerie, jež se přizpůsobí sama.

Shrnutí

Grid stojí na rozdělení rolí. Rodičovský prvek se přepne na display: grid a popíše, jak mřížka vypadá; jeho přímí potomci se stanou položkami a starají se jen o to, kde v ní sedí. Vlastnost napsaná na špatné straně je nejčastější důvod, proč se zdánlivě nic nestalo.

Nejvíc si z lekce odnášíme pojmenované oblasti. Rozvržení stránky se s nimi nakreslí jmény v grid-template-areas, každý prvek si pak přes grid-area řekne o svou oblast jménem – a rozvržení pro úzké okno je přepsání jediné vlastnosti v media query. HTML přitom zůstává nedotčené. Cenou za tu pohodlnost je, že neplatný mustr prohlížeč tiše zahodí, takže se chyba hledá očima.

Kde se jméno nehodí, sáhneme rovnou na linie. Čísluje se čára mezi dráhami, ne dráha sama, span říká kolik dráh zabrat místo odkud kam a záporná čísla počítají od konce – ale jen v mřížce, kterou jsme opravdu nakreslili.

Zbytek práce jsme nechali na prohlížeči. Dokresluje si řádky, na které jsme mu místo nenaplánovali, položky bez souřadnic rozmisťuje v pořadí z HTML a s dense umí zpětně zaplnit díry, které tím vznikly. Přes minmax() s auto-fill nebo auto-fit si spočítá i počet sloupců, takže se galerie obejde bez jediné media query.

Slovník k tomu je krátký: kontejner je rodič s display: grid, položky jsou jeho přímí potomci, dráha je celý sloupec nebo řádek, linie jsou očíslované čáry mezi dráhami a oblast je obdélník přes jednu nebo víc buněk.

Dokumentace

Popis fungování všech vlastností gridu se do jedné lekce nevejde. Nejlepší místo, kam se pro ně vracet, je A Complete Guide to CSS Grid na CSS-Tricks. Je psaný jako referenční příručka s obrázkem u každé vlastnosti, takže se v něm dobře hledá i tehdy, když si nevzpomenete na její název.

Umím?

  • Pojmenuji části mřížky: kontejner, položka, dráha, linie, buňka, oblast.
  • Vím, které vlastnosti patří rodiči a které potomkovi, a poznám, když je některá napsaná na špatné straně.
  • Umístím položku na konkrétní linie přes grid-column a grid-row a vysvětlím, proč 1 / 3 znamená dva sloupce.
  • Nakreslím rozvržení stránky mustrem a posadím do něj prvky přes grid-area.
  • Vysvětlím, proč se neplatný mustr nikde nehlásí a jak ho odladit.
  • Poznám rozdíl mezi explicitní a implicitní mřížkou a vím, odkud si dokreslená dráha bere velikost.
  • Popíšu, v jakém pořadí prohlížeč rozmisťuje položky, proč v mřížce vzniká díra a co s ní udělá dense.
  • Napíšu galerii, které se počet sloupců mění bez media query.
  • Vyberu mezi auto-fill a auto-fit a zdůvodním proč.
  • Otevřu v prohlížeči odznak grid a přečtu z něj čísla linií.