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.

Automatické umisťování

Souřadnice v reálné mřížce nedostane skoro nikdo. Napíšeme je jedné dvěma položkám, které mají být jinak velké nebo jinde, a zbytek prohlížeč rozmístí sám. Vyplatí se vědět, podle jakého klíče to dělá – jinak vypadají výsledky jako rozmar.

css
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* jediná položka, které jsme řekli, kolik má zabrat */
.movie--premiere {
  grid-column: span 2;
}

Prohlížeč prochází mřížku ve dvou kolech:

  1. Nejdřív usadí položky, které mají místo dané – tedy ty se souřadnicemi v grid-column a grid-row nebo se jménem oblasti v grid-area. Ty sedí tam, kam jsme řekli, bez ohledu na pořadí v HTML.
  2. Pak doplní zbytek. Bere položky v tom pořadí, v jakém stojí v HTML, a sází je do volných buněk zleva doprava a shora dolů. Obsazenou buňku přeskočí a řádek si dokreslí, když mu dojdou.

Kurzor se nevrací

Druhé kolo si můžeme představit jako kurzor, který jede mřížkou jako psací stroj: zleva doprava, na konci řádku o řádek níž. A hlavně – buňku, kterou jednou minul, už znovu neuvidí.

Právě tady vzniká díra. Když na kurzor vyjde položka, která potřebuje dva sloupce, a do konce řádku zbývá sloupec jediný, položka se do řádku nevejde. Kurzor se posune na začátek dalšího řádku a v tom předchozím zůstane prázdné místo.

Dvě galerie o pěti položkách ve třech sloupcích. Vlevo výchozí chování: položky 1 a 2 jsou v prvním řádku, třetí buňka zůstala prázdná, protože se do ní nevešla široká položka 3, ta sedí až ve druhém řádku vedle položky 4. Vpravo totéž s dense: položka 4 se přesunula nahoru do prázdné buňky a mřížka je zaplněná.

Není to chyba, je to důsledek pravidla o kurzoru. Prohlížeč by musel položku 4 posunout před položku 3, a to by bez dovolení neudělal.

Dovolení se jmenuje dense

Dovolení se dává vlastností grid-auto-flow:

css
.gallery {
  /* mřížka pořád roste po řádcích, ale díry se doplňují zpětně */
  grid-auto-flow: row dense;
}

S dense se kurzor u každé díry ohlédne dozadu a zkusí, jestli se do ní nevejde některá z pozdějších položek. V naší galerii se do prázdné buňky vrátí položka 4, mřížka se zaplní a nikde nezůstane prázdno.

Cenou za to je, že pořadí na obrazovce přestane odpovídat pořadí v HTML. Položka 4 je vidět dřív než položka 3, ale odečítač obrazovky ji přečte později a tabulátor na ni skočí až po ní. U galerie obrázků to nikomu nevadí, u seznamu kroků nebo u formuláře je to problém.

Pozor

dense mění jen to, co si prohlížeč doplňuje sám. Položku, které jsme dali konkrétní souřadnice, nikam nepřesune – ta drží své místo za všech okolností. A když dvěma položkám nastavíme souřadnice do stejné buňky, mřížka je nerozhodí ani nezvětší: prostě se přes sebe překryjí.

Když nevyplníme obojí

Souřadnice se dá dát i jen v jednom rozměru. Zápis grid-column: 2 bez grid-row znamená „druhý sloupec, o řádek se postarej sám“ – položka zůstane v druhém kole, ale hledá se pro ni volné místo jen ve druhém sloupci.

Je to šikovné u tabulkových rozvržení, kde chceme mít jistotu ve sloupcích a řádky nás nezajímají. A je to zároveň nejčastější důvod, proč se v mřížce najednou objeví o dva řádky víc, než jsme čekali.

Bonus

Dejte v galerii jedné položce grid-row: 5 a podívejte se ve vývojářských nástrojích, co to udělá. Kolik řádků mřížka najednou má a kolik z nich je prázdných? Zkuste odhadnout výsledek dřív, než stránku obnovíte.