CSS Grid do hloubky

Linie a umisťování položek

Když v kontejneru vzniknou sloupce a řádky, vzniknou spolu s nimi linie – čáry, které mřížku dělí. Jsou to zábradlí, mezi která se položky věší, a mřížka si je sama očísluje. Tři sloupce mají čtyři svislé linie, dva řádky tři vodorovné.

Číslují se linie, ne dráhy, a odtud pramení skoro každý omyl v tomhle tématu. Sloupec číslo jedna je to, co leží mezi linií 1 a linií 2.

Souřadnice položky

Položce řekneme, mezi kterými liniemi má sedět, vlastnostmi grid-column a grid-row. Píšou se na potomka, ne na kontejner, a hodnoty se oddělují lomítkem jako „od / do“:

.movie--premiere {
  /* od svislé linie 2 do svislé linie 4, tedy přes dva sloupce */
  grid-column: 2 / 4;
  /* od vodorovné linie 1 do linie 2, tedy jeden řádek */
  grid-row: 1 / 2;
}

Konec se dá vynechat. Samotné grid-column: 2 znamená „začni na linii 2 a zaber jednu dráhu“, což je totéž jako 2 / 3.

Kolik dráh zabrat

Druhou možností je neříkat, kde položka končí, ale kolik místa si má vzít. K tomu slouží klíčové slovo span:

.movie--premiere {
  /* začni na linii 2 a zaber dva sloupce */
  grid-column: 2 / span 2;
}

A když nezáleží ani na tom, kde začne, stačí span samotné:

.movie--premiere {
  /* zaber dva sloupce, kdekoli se najdou */
  grid-column: span 2;
}

Tenhle zápis je v praxi nejčastější, protože se neváže na konkrétní čísla – funguje i v mřížce, které sloupců přibude nebo ubude.

Počítání od konce

Linie se dají číslovat i zprava, resp. odspodu. Poslední linie je -1, předposlední -2 a tak dál. Nejužitečnější kombinace celé kapitoly vypadá takhle:

.movie--premiere {
  /* od první linie do poslední, tedy přes celou šířku mřížky */
  grid-column: 1 / -1;
}

Ať má mřížka tři sloupce nebo sedm, tahle položka se roztáhne přes všechny. S span 2 bychom museli počet hlídat sami.

Obojí naráz

Čtyři souřadnice se dají zapsat jednou vlastností grid-area v pořadí začátek řádku / začátek sloupce / konec řádku / konec sloupce:

.movie--premiere {
  grid-area: 1 / 2 / 2 / 4;
}

Osobně si myslím, že se tenhle tvar čte mizerně – pořadí čísel si nikdo nepamatuje a při čtení cizího kódu se v něm ztratíte. Uvádíme ho hlavně proto, abyste ho poznali. Vlastnost grid-area má totiž ještě druhou podobu, se jménem místo čísel, a ta stojí za celou příští kapitolou.