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.

Cvičení 2

Galerie – pokračování

Co si vyzkoušíte

Přidáte do galerie kartu, která zabírá dva sloupce, a najdete okamžik, kdy se mřížce nevejde. Vycházíte z galerie, kterou jste právě dokončili.

Zadání

  1. Přidejte v HTML první kartě druhou třídu card--wide.
  2. Nechte ji přes grid-column: span 2 zabrat dva sloupce.
  3. Zužujte okno, dokud mřížce nezbude jediný sloupec. Zjistěte přes odznak grid, kolik sloupců má mřížka doopravdy a který z nich je dokreslený.
  4. Přidejte media query, která v úzkém okně širokou kartu vrátí na jeden sloupec.
  5. Dejte poslední kartě grid-column: 1 / -1 a porovnejte oba zápisy: který z nich se v úzkém okně chová správně sám od sebe?

Bonus

  1. Najděte šířku okna, ve které vedle široké karty vznikne díra. Pak přidejte galerii grid-auto-flow: row dense a sledujte, která karta se do díry vrátí – a jak se tím rozešlo pořadí na obrazovce s pořadím v HTML.
  2. Dejte široké kartě navíc grid-row: span 2 a zkontrolujte, že dokreslený řádek dostal výšku podle grid-auto-rows.
  3. Udělejte z jedné karty vlastní mřížku: přidejte jí dovnitř patičku s datem a přes grid-template-rows: auto 1fr auto ji přilepte ke spodní hraně karty. Ověřte, že se vnitřní mřížka té vnější nijak nedotkla – pro galerii je karta pořád jediná položka.