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.

Explicitní a implicitní mřížka

Mustr z předchozí kapitoly popisuje mřížku, kterou jsme nakreslili sami – té se říká explicitní. Položek ale bývá víc než buněk, a v tu chvíli vstupuje do hry mřížka, kterou jsme nikdy nenapsali.

css

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

Nakreslili jsme tři sloupce a jeden řádek, tedy tři buňky. Co se stane s pátou položkou?

Mřížka se třemi sloupci. Horní řádek s prvky 1 až 3 má plnou linku a popisek „explicitní řádek – napsali jsme ho“. Pod ním nižší řádek s prvky 4 a 5 čárkovanou linkou a popiskem „implicitní řádek – dokreslil prohlížeč, výšku určí obsah“.

Prohlížeč položky nezahodí ani nepřekryje. Dokreslí tolik řádků, kolik jich je potřeba, a těm se říká implicitní. Od těch napsaných se liší v jediném: neřekli jsme jim, jak mají být vysoké, takže si výšku vezmou od obsahu. Odtud ten častý zmatek, proč mají karty ve třetí řadě jinou výšku než v první.

Výška dokreslených dráh

Dokresleným řádkům se dá výška předepsat vlastností grid-auto-rows:

css

.gallery {
  grid-template-rows: 120px;
  /* každý dokreslený řádek dostane stejnou výšku jako ten napsaný */
  grid-auto-rows: 120px;
}

U galerie se grid-template-rows ve skutečnosti většinou vůbec nepíše. Když jsou všechny řádky dokreslené, stačí jedno pravidlo pro všechny:

css

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

Zápis minmax(120px, auto) říká „nejmíň 120 pixelů, a když je obsahu víc, ať se řádek roztáhne“. Funkci minmax() si rozebereme za chvíli.

Kterým směrem mřížka roste

Že přibývají řádky, a ne sloupce, je jen výchozí nastavení. Směr se dá otočit vlastností grid-auto-flow:

css

.timeline {
  display: grid;
  grid-template-rows: repeat(3, 80px);
  /* dokreslují se sloupce, mřížka roste doprava */
  grid-auto-flow: column;
  /* a takhle širokou dráhu každý dokreslený sloupec dostane */
  grid-auto-columns: 200px;
}

Dvojice se drží pohromadě: k grid-auto-flow: row patří grid-auto-rows, k column zase grid-auto-columns. Napsat grid-auto-rows u mřížky, která roste doprava, není chyba – jen to nic neudělá, protože žádný řádek nepřibývá.

Pozor

Prvek, který dostane grid-area se jménem, jaké v mustru není, nezmizí ani nespadne mimo stránku. Prohlížeč pro něj založí místo v implicitní mřížce, typicky v novém řádku pod tou nakreslenou. Přesně to jste viděli ve chvíli, kdy jste jméno nav nahradili tečkou.

Proč se v implicitní mřížce nedá počítat od konce

Teď se vrátíme k -1 z kapitoly o liniích. Záporná čísla míří na linie explicitní mřížky – ty dokreslené žádné záporné číslo nemají. V galerii, kde grid-template-rows vůbec nenapíšeme, žádné explicitní řádky nejsou – obě čísla v grid-row: 1 / -1 tak ukazují na tutéž linii a položce zůstane jediný řádek.

U sloupců to naopak funguje spolehlivě, protože ty v galerii nakreslené máme. Proto je grid-column: 1 / -1 běžný zápis a grid-row: 1 / -1 past.