Lekce 1.2

Flexbox a responzivní vzory

Jak si prvky dělí místo v řádku, kdy sáhnout po mřížce a jak psát velikosti tak, aby se stránka přizpůsobila sama.

Cvičení 2

Karta – pokračování

Co si vyzkoušíte

Postavíte z hotových karet řádek, který se sám zalomí podle šířky okna, a ověříte si, co to znamená pro zarovnání mezi řádky. Vycházíte z karty, kterou jste právě dokončili – v HTML jich stojí vedle sebe víc, obalené společným rodičem .products.

Zadání

  1. Přepněte .products na flexbox a přidejte flex-wrap: wrap a gap.
  2. Dejte každé kartě flex: 1 1 260px, ať v širokém okně vyplní řádek a v úzkém se zalomí pod sebe.
  3. Zužujte okno, dokud se karty nezalomí na dva řádky, a všimněte si, že karty ve druhém řádku nelícují se sloupci v prvním.
  4. Při zobrazování produktů v eshopu toto většinou nechceme. Možná by pro tento případ bylo vhodnější mít jednotlivé karty jako flexbox, ale seznam produktů .products jako grid.
  5. Upravte CSS tak, aby .products byla mřížka se třemi stejně širokými sloupci.
  6. Zduplikujte karty produktů, ať jich máte na stránce alespoň 6.

Bonus

  1. Nyní máme karty produktů krásně pod sebou a jsou stejně široké, ale přestalo nám fungovat automatické zalamování karet, když se vedle sebe nevejdou v úzkém okně.
  2. Přidejte media query a zajistěte, aby měl grid 1, 2, 3 a 4 sloupce podle šířky obrazovky. Odhadněte, ve breakpointu (šířce okna) se má počet sloupců změnit.
  3. Umíte měnit počet sloupců v gridu i bez media query? Vzpomeňte si z předchozí lekce o gridu, co je auto-fill a nebo auto-fit.