CSS Grid do hloubky

Mřížka, která se přizpůsobí sama

Galerie karet se dá napsat tak, že o šířce okna nepadne ani slovo a nenapíšeme jedinou media query. Potřebujeme k tomu dvě věci: rozsah místo pevné šířky a sloupce, jejichž počet si prohlížeč spočítá sám.

Rozsah místo jedné hodnoty

Funkce minmax() bere dolní a horní mez a dá se použít všude, kde se udává velikost dráhy:

.layout {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
}

První sloupec neklesne pod 200 pixelů a nepřeroste 300, zbytek si vezme druhý. Je to jako polička v regálu, která se dá posouvat, ale jen mezi dvěma zarážkami. Horní mez bývá častěji 1fr, tedy „ať si vezme, co zbude“:

.layout {
  grid-template-columns: minmax(200px, 1fr) 2fr;
}

Meze se dají míchat, jen jedna kombinace nedává smysl: fr smí stát jen jako horní mez. minmax(1fr, 300px) je neplatný zápis, protože dolní mez musí být konkrétní velikost, ne podíl na tom, co zbude.

Sloupce, které si prohlížeč spočítá sám

Funkci repeat() známe s číslem. Místo čísla ale umí i klíčové slovo, které znamená „kolik se jich vejde“:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

Prohlížeč to počítá jako slovní úlohu. Řekněme, že galerie je široká 1000 pixelů:

1. Kolik dvousetdvacetipixelových sloupců se do ní vejde, když mezi každé dva patří mezera 18 pixelů? Vejdou se čtyři, protože 4 × 220 + 3 × 18 = 934. Pátý už ne, ten by potřeboval 1172 pixelů.
2. Kolik místa na sloupce zbylo? Odečtou se tři mezery, tedy 1000 − 54 = 946 pixelů.
3. Horní mez je 1fr, takže se dostupné místo rozdělí rovným dílem: 946 ÷ 4 = 236,5 pixelu na sloupec.

Dolní mez tedy rozhoduje o počtu sloupců, horní o tom, jak si mezi sebe rozdělí místo. Při zúžení okna sloupců ubývá, při rozšíření přibývá – a my jsme nikde nenapsali žádnou hranici v pixelech.

auto-fill proti auto-fit

Vedle auto-fill existuje ještě auto-fit. Obě klíčová slova napočítají stejný počet dráh a rozdíl přijde až v okamžiku, kdy je položek míň než dráh:

• auto-fill prázdné dráhy nechá stát. Jsou tam, mají svou šířku a berou místo, jen v nich nic není.
• auto-fit prázdné dráhy srazí na nulu – i s mezerami, které k nim patřily – a uvolněné místo rozdá těm, ve kterých něco je. Když je horní mez 1fr, zbylé položky se přes celou šířku roztáhnou.

Pozor na slovo srazí: dráha se zúží na nulu, ale nezmizí. Linie po ní zůstává, takže grid-column: 1 / -1 se pořád chová stejně v obou variantách.

Roztažení navíc dělá jen ta 1fr nahoře. S repeat(auto-fit, minmax(220px, 300px)) se karty přes 300 pixelů nepřetáhnou a místo po sražených dráhách zůstane vpravo prázdné – vypadá to pak skoro stejně jako auto-fill.

Kdy se rozhodovat nemusíme? Když je galerie skoro vždycky plná, protože při plném počtu položek dělají obě klíčová slova totéž. Rozhoduje se to podle toho, jak má vypadat poloprázdná: osobně sahám skoro vždy po auto-fill, protože jediná karta roztažená přes celou obrazovku vypadá spíš jako chyba než jako záměr. auto-fit volím tam, kde má obsah plochu opravdu vyplnit – třeba u dlaždic na úvodní stránce.

Kde automatika končí

Tenhle zápis v praxi potkáte skoro na každé galerii, na výpisu článků i na seznamu produktů. Má ale dvě hranice, o kterých je dobré vědět.

První je, že auto-fill a auto-fit potřebují znát šířku kontejneru. V mřížce, jejíž šířka se teprve odvozuje od obsahu, prohlížeč nemá z čeho počítat a napočítá jedinou dráhu.

Druhá je zásadnější. Rozvržení celé stránky se pořád většinou píše mustrem a jednou media query – že má být v úzkém okně navigace nad obsahem a ne vedle něj, je rozhodnutí o obsahu a to za nás žádná funkce nespočítá.