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.

Doporučené úlohy na doma

Obě úlohy stojí jen na tom, co jsme dneska probrali, a dají se dělat nezávisle na sobě.

Osobní stránka

Postavte rozvržení osobní stránky z pěti oblastí: hlavička, navigace, obsah, postranní sloupec s odkazy a patička. V širokém okně ať jsou navigace a postranní sloupec po stranách obsahu, v úzkém pod sebou. Hotovo je ve chvíli, kdy se rozvržení přepíná jedinou media query, patička drží u spodní hrany okna i na krátké stránce a v HTML nemusíte nic přesouvat.

Program kina

Vypište karty s programem kina do galerie, která si počet sloupců řídí sama. Jedna karta patří filmu týdne a je přes dva sloupce, jedna přes dva řádky. Hotovo je ve chvíli, kdy karty drží stejnou výšku, mezi šířkami okna se počet sloupců plynule mění a v žádné šířce nic nepřetéká ven ze stránky.

Najděte pak šířku, ve které v mřížce zůstane díra, a rozhodněte se, jestli ji chcete zaplnit přes dense. Ať už se rozhodnete jakkoli, umějte to zdůvodnit – o to v téhle úloze jde víc než o samotné zapnutí vlastnosti.