Layout
Grid karet
Karty stejné velikosti v pravidelném gridu. Počet sloupců se přizpůsobí šířce obrazovky, sám a bez media queries.
Layout e-shopů, výpisů článků a galerií. V náhledu vidíte, kam se dostaneme.
Struktura
Karty jako seznam
Výpis kurzů je seznam, a tak karty zapíšeme jako položky li v nečíslovaném seznamu ul. Každá karta má obrázek, nadpis, popis a odkaz.
Obrázek je jen ozdoba, proto má prázdný alt="". Screen reader ho přeskočí.
Grid
Tři stejné sloupce
Seznamu vypneme odrážky a uděláme z něj grid. repeat(3, 1fr) znamená „třikrát jeden díl“, tedy tři stejně široké sloupce.
Karty se do gridu skládají samy, řádek po řádku. Nemusíme jim říkat, kam patří.
Karta
Border a jednotné obrázky
Karta dostane border a zaoblené rohy. overflow: hidden ořízne obrázek do zaoblení. aspect-ratio s object-fit: cover zajistí, že každý obrázek bude mít stejný poměr stran, ať je původní fotka jakákoli.
Všimněte si odkazů „Detail kurzu“. Nejsou v jedné rovině, protože popisy jsou různě dlouhé.
Zarovnání
Odkazy vždy dole
Grid už karty natáhl na stejnou výšku. Teď je potřeba přitlačit odkaz ke spodnímu okraji. Kartu i její tělo uděláme sloupcem a odkazu dáme margin-top: auto, který spotřebuje všechno volné místo nad ním.
Problém
Tři sloupce na telefonu
Na telefonu zůstaly tři sloupce, protože jsme je pevně nastavili. Karty jsou tak úzké, že se z nich nedá nic přečíst.
Responzivita
Sloupců, kolik se vejde
Místo pevného počtu řekneme: „sloupec musí mít aspoň 240 pixelů. Vejde se jich kolik se vejde a zbylé místo se rozdělí rovným dílem.“
Na desktopu jsou tři sloupce, na tabletu dva. Žádné @media.
Responzivita
A na telefonu jeden
Stejné pravidlo, užší obrazovka. Vedle sebe se nevejdou ani dva sloupce po 240 pixelech, tak zbude jeden.
auto-fill nebo auto-fit? Liší se, jen když je karet málo. auto-fill nechá na konci řádku prázdné sloupce, auto-fit roztáhne karty přes celou šířku.
Výjimka
Zvýrazněná karta přes dva sloupce
První kurz chceme zvýraznit. Dostane třídu featured a roztáhne se přes dva sloupce. Ostatní karty se kolem něj přeskládají samy.
Problém
Dva sloupce tam, kde je jeden
Na telefonu má grid jediný sloupec, ale zvýrazněná karta si vynutila dva. Grid si proto přidal druhý, úzký sloupec navíc. Ostatní karty se teď střídají v širokém a úzkém sloupci a v tom úzkém se nedá nic přečíst.
Řešení
Roztáhnout, jen když je místo
Roztažení přes dva sloupce zapneme až od šířky 600 pixelů. min-width znamená „od této šířky výš“, tedy opak max-width.
Takhle začínáme od telefonu a pro větší obrazovky přidáváme. Tomu se říká mobile first a věnuje se mu lekce Mobile first.
Recept
Grid karet v kostce
auto-fill+minmax(): responzivní bez media queriesaspect-ratio+object-fit: stejné obrázkymargin-top: auto: odkaz vždy dole- výjimky přes víc sloupců jen tam, kde se vejdou