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

Kostra – pokračování

Co si vyzkoušíte

Stejnou stránku přepnete v úzkém okně do jednoho sloupce a zjistíte, kam prohlížeč posadí prvek, pro který v mustru není místo. Vycházíte z rozvržení, které jste právě dokončili.

Zadání

  1. Přidejte media query pro max-width: 700px.
  2. Uvnitř ní přepište mustr na jediný sloupec v pořadí hlavička, navigace, obsah, patička a nastavte grid-template-columns: 1fr.
  3. Zužujte okno prohlížeče, dokud se rozvržení nepřepne. Ověřte, že jste v HTML nezměnili ani písmeno.
  4. V širokém mustru nahraďte jméno nav tečkou, takže oblast toho jména zmizí. Najděte ve vývojářských nástrojích, kam se navigace posadila a kolik má mřížka najednou řádků.
  5. Vraťte mustr zpět do funkční podoby.

Bonus

  1. Rozdělte gap na row-gap a column-gap a dejte mezerám mezi řádky jinou velikost než mezi sloupci.
  2. Přidejte do stránky pátý prvek <aside> s reklamou a posaďte ho v širokém okně napravo od obsahu, takže stránka bude mít tři sloupce: navigaci, obsah a postranní sloupec. Šířky ať jsou 200px, 1fr a 240px. V úzkém okně se reklama zařadí pod obsah.
  3. Vymyslete třetí, „tabletové“ rozvržení pro šířky mezi 700px a 1000px. Podmínka je jediná: prvky v něm nesmí být všechny jen pod sebou. Nabízí se třeba navigace přes celou šířku pod hlavičkou a pod ní obsah vedle reklamy – ale klidně si vymyslete vlastní. Zkontrolujte, že se stránka při zužování okna přepne dvakrát a že žádná ze tří variant nic nepřekrývá.