Layout

Tři sloupce

Navigace vlevo, obsah uprostřed, doplňky vpravo. Na tabletu dva sloupce, na telefonu jeden.

Layout dokumentací a velkých webů. V náhledu vidíte, kam se dostaneme.

Struktura

Tři oblasti v jednom wrapperu

Ve wrapperu .layout jsou tři části: navigace mezi lekcemi, obsah a vpravo obsah aktuální stránky.

Oblasti jsou zase obarvené. Bez CSS jsou pod sebou v pořadí, v jakém jsou v HTML.

Grid

Navigace a pravý sidebar mají pevnou šířku. Obsah uprostřed dostane všechno, co zbude.

Grid rozdělí prvky do sloupců podle pořadí v HTML: první do prvního sloupce, druhý do druhého a tak dál.

Šířka

Stejně jako v předchozích lekcích celý wrapper omezíme a dáme doprostřed.

Úklid

Pomocné barvy nahradíme klidným vzhledem. Postranní sloupce mají menší písmo, aktuální lekce je zvýrazněná a pravý sidebar odděluje tenká čára.

Odkazy v pravém sidebaru fungují. Klikněte v náhledu a obsah se posune na daný nadpis.

Problém

Náhled se přepnul na šířku tabletu, 768 pixelů. Oba postranní sloupce si drží svou šířku a obsah uprostřed se zúžil na pár slov na řádek.

Tři sloupce potřebují tři kroky: desktop, tablet a telefon. Každý dostane vlastní rozvržení.

Responzivita · tablet

Pod 900 pixelů necháme jen dva sloupce. Pravý sidebar pošleme do druhého sloupce pod obsah a navigace se natáhne přes oba řádky.

Bez grid-column: 2 by grid poslal sidebar do první volné buňky, tedy vlevo pod navigaci.

Problém

Na telefonu platí pravidla pro tablet. Navigace si ale bere 200 pixelů a obsahu zbývá úzký proužek.

Responzivita · telefon

Pod 600 pixelů zbude jediný sloupec. Umístění z tabletu zrušíme hodnotou auto a odkazy navigace dáme vedle sebe, aby nezabraly celou obrazovku.

Media query pro telefon je v CSS až za tou pro tablet. Na telefonu platí obě a pozdější vyhrává. Pořadí je tedy od nejširší obrazovky po nejužší.

Recept