Layout
Úzký sloupec
Vycentrovaný text, který se dobře čte. Layout pro články, blogy a dokumentaci.
V náhledu vidíte, kam se dostaneme. Obrázek může vystoupit ze sloupce přes celou šířku.
Problém
Řádky přes celou šířku
Článek bez úprav zabere celou šířku okna. Řádek má přes sto znaků a oko na jeho konci těžko hledá začátek dalšího.
Obrázek se do okna vejde díky pravidlu z lekce figure: max-width: 100%.
Šířka
45 až 75 znaků na řádek
Tolik znaků se podle typografů čte nejpohodlněji. Šířku proto omezíme v jednotkách ch, kde 1ch je šířka jednoho znaku.
max-width místo width: na široké obrazovce bude sloupec široký 65 znaků, na úzké se zúží.
Zarovnání
Sloupec doprostřed
Sloupec je zatím přilepený vlevo. Margin auto zleva i zprava rozdělí volné místo na dvě stejné poloviny.
Problém
Na telefonu až ke kraji
Na úzké obrazovce se sloupec zúžil, jak měl. Jenže text teď naráží přímo do okrajů displeje.
Na desktopu to nevadilo, protože kolem sloupce bylo volné místo. Na telefonu žádné nezbylo.
Řešení
Padding
Sloupci přidáme padding zleva i zprava. Na desktopu ho skoro nepoznáte, na telefonu odsadí text od kraje.
Elegantněji
Jedním řádkem pomocí min()
Funkce min() vybere menší ze dvou hodnot. Na desktopu je menší 65ch, na telefonu 100% - 40px, tedy šířka okna bez okrajů.
margin-inline nastaví levý a pravý margin najednou.
Typografie
Písmo a řádkování pro čtení
Úzký sloupec unese větší písmo a vzdušnější řádkování. Úvodní odstavec, tzv. perex, zvětšíme a ztlumíme.
Jednotka ch roste s písmem, takže větší písmo sloupec trochu rozšířilo. Pořád v něm ale je 65 znaků.
Výjimka
Obrázek přes celou šířku
Text má zůstat úzký, ale obrázek má vystoupit přes celou šířku okna. Z článku uděláme grid se třemi sloupci: dva krajní okraje a prostřední sloupec pro text.
Každý prvek článku jde do prostředního sloupce. Jen obrázek s třídou wide se roztáhne od první čáry gridu po poslední. Sjeďte v náhledu dolů k obrázku.
Responzivita
Na mobilu už to skoro funguje
Díky min() má text na telefonu kolem sebe 20 pixelů a obrázek jde od kraje ke kraji. Media query potřebujeme jen na menší písmo.
Přepněte náhled na desktop klávesou M a porovnejte.
Recept
Úzký sloupec v kostce
- 45–75 znaků na řádek, šířka v
ch min()hlídá okraje na telefonu- úzký sloupec unese větší písmo
- výjimky přes celou šířku řeší grid se třemi sloupci