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í 1

Galerie

Co si vyzkoušíte

Postavíte galerii karet, která se přizpůsobí šířce okna bez media query. Ve výchozím stavu máte v HTML devět karet uvnitř prvku .gallery a v style.css hotový vzhled jedné karty. Chybí jen mřížka kolem nich.

CodePen

Zadání máte připravené na CodePenu: Galerie. Otevřete si ho a pracujte rovnou v něm.

Zadání

  1. Přepněte .gallery na mřížku a dejte jí gap: 20px.
  2. Nastavte sloupce tak, aby si jejich počet spočítal prohlížeč a žádný z nich nebyl užší než 220 pixelů.
  3. Zužujte a rozšiřujte okno a sledujte, ve kterých šířkách se počet sloupců mění.
  4. Zakomentujte na chvíli v HTML všechny karty kromě dvou a přepněte zápis z auto-fill na auto-fit a zase zpátky. Rozhodněte se, který z nich chcete, a komentáře pak zase odstraňte.
  5. Dejte řádkům minimální výšku tak, aby karta s kratším textem nebyla nižší než ostatní, ale delší text ji pořád mohl protáhnout.
  6. Ověřte ve vývojářských nástrojích přes odznak grid, kolik sloupců má mřížka v maximalizovaném okně.

Bonus

  1. Zužujte okno pod dolní mez sloupce, dokud obsah nepřeteče ven ze stránky. Opravte to podle poznámky z výkladu a přetečení zkuste vyrobit znovu.
  2. Nastavte mezeru mezi řádky na dvojnásobek mezery mezi sloupci.
  3. Spočítejte nejdřív na papíře, kolik sloupců bude mít galerie široká přesně 800 pixelů, a jak široký každý z nich vyjde. Pak si to ověřte: nastavte .gallery napevno width: 800px a přeměřte sloupce ve vývojářských nástrojích. Pevnou šířku potom zase smažte.