CSS Grid do hloubky

Kontejner a jeho položky

Mřížka vždycky vzniká na jednom prvku a platí pro to, co je uvnitř něj. Ukažme si to na programu kina – šest filmů, které chceme rozmístit do tří sloupců a dvou řádků.

<section class="schedule">
  <article class="movie">Vetřelec</article>
  <article class="movie">Sedm samurajů</article>
  <article class="movie">Kmotr</article>
  <article class="movie">Rašomon</article>
  <article class="movie">Metropolis</article>
  <article class="movie">Casablanca</article>
</section>

.schedule {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 200px 200px;
  gap: 16px;
}

Tři hodnoty v grid-template-columns znamenají tři sloupce, dvě hodnoty v grid-template-rows dva řádky. Filmy se do vzniklých šesti míst posadí samy v tom pořadí, v jakém stojí v HTML – zleva doprava, pak o řádek níž.

Rodič a potomci

Prvek, na kterém jsme mřížku zapnuli, je rodičovský prvek; v gridu se mu říká kontejner (grid container). Prvky uvnitř něj jsou jeho potomci (children) a mřížka z nich dělá položky gridu (grid items). Mezi sebou jsou to sourozenci (siblings) a právě ti se v mřížce rozmisťují.

Položkami se stanou jen přímí potomci. Kdyby byl uvnitř každého článku ještě nadpis a odstavec, mřížka o nich neví – ta pracuje s články, ne s jejich vnitřkem. Odtud plyne obvyklý postup: rozvržení stránky děláme jednou mřížkou, a co je uvnitř jednotlivých položek, řešíme zvlášť.

Co patří rodiči a co potomkovi

Vlastnosti gridu se dělí na dvě skupiny a plete se to jen do chvíle, než si uvědomíme, o čem která mluví. Rodič popisuje, jak mřížka vypadá:

Potomek o mřížce nerozhoduje. Řekne si jen, kde v ní sedí:

Vlastnost napsaná na špatné straně je nejčastější důvod, proč se „nic nestalo“. grid-column na kontejneru neudělá vůbec nic a grid-template-columns na položce taky ne – pokud tedy z položky sami neuděláme další mřížku.

Jednotka fr a funkce repeat()

Jednotka fr je zkratka z fraction, tedy díl dostupného místa. Prohlížeč nejdřív odečte mezery a pevné šířky, a co zbude, rozdělí mezi fr sloupce. Tři sloupce po 1fr si tedy dostupné místo rozdělí na třetiny.

Opakující se hodnoty umí zkrátit funkce repeat():

.schedule {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 200px);
  gap: 16px;
}

Obojí zapisuje přesně tutéž mřížku. repeat() se vyplatí od tří dráh výš a u galerií bez ní prakticky nehneme – uvidíme proč, až si necháme počet sloupců spočítat prohlížečem.

Slovník mřížky

Zbytek lekce se o části mřížky opírá jménem, takže si je pojmenujme rovnou. Anglické názvy uvádíme proto, že přesně takhle jsou pojmenované ve vývojářských nástrojích i v dokumentaci:

grid-template-rows v ukázce psát nemusíme – řádky si prohlížeč umí dokreslit sám. Napsali jsme je schválně, ať je vidět, že mřížka opravdu vzniká ve dvou rozměrech. Co se stane, když je vynecháme, si ukážeme v kapitole o implicitní mřížce.