Layout

Kostra stránky

Hlavička nahoře, obsah uprostřed a patička vždy dole, i když je obsahu málo.

Základ, na kterém stojí skoro každý web. V náhledu vidíte, kam se dostaneme.

Struktura

Tři části pod sebou

Kostru tvoří tři elementy: header, main a footer. Jsou přímo v body, jeden za druhým.

Bez CSS jsou bloky pod sebou. Jsou to blokové elementy a každý zabere celou šířku. Tomu se říká normální tok dokumentu.

Trik návrháře

Obarvěte si oblasti

Při stavbě layoutu nevidíme, kde který blok začíná a končí. Proto si každé oblasti dočasně dáme výraznou barvu.

Na konci lekce barvy zase uklidíme.

Příprava

Pryč s výchozím marginem

Kolem bloků vidíte bílé mezery. To je výchozí margin body. Zrušíme ho a místo něj dáme blokům padding.

box-sizing: border-box zajistí, že se padding započítá do šířky bloku. Díky tomu se rozměry snáz počítají, proto ho dáváme na začátek skoro každého webu.

Problém

Patička uprostřed okna

Obsahu je málo, a tak patička skončí hned pod ním. Pod patičkou zbývá prázdné místo a stránka vypadá nedodělaně.

Bloky jsou vysoké jen tolik, kolik potřebuje jejich obsah. Potřebujeme říct: „main, zaber všechno volné místo“.

Řešení 1

Flexbox

body bude vysoké aspoň jako okno a z bloků udělá sloupec. flex: 1 pak main natáhne přes všechno volné místo.

100vh znamená 100 % výšky okna (viewport height).

Řešení 2

Grid

Stejného výsledku dosáhneme gridem se třemi řádky. Prostřední řádek 1fr dostane všechno volné místo, krajní řádky auto jen tolik, kolik potřebují.

Obě řešení jsou správná. Grid má výhodu, že celé rozvržení je na jednom místě, v body. Dál pokračujeme s ním.

Šířka obsahu

Pozadí přes celou šířku, obsah uprostřed

Pozadí bloků sahají od kraje ke kraji, ale obsah má mít omezenou šířku. Proto do každého bloku vložíme vnitřní wrapper .wrap a vycentrujeme ho.

Červený přerušovaný rámeček je zase jen pomůcka. Ukazuje, že obsah všech tří bloků začíná na stejné svislé linii.

Úklid

Finální vzhled

Kostra drží, pomocné barvy a rámečky můžeme odstranit. Nahradí je klidné barvy: bílá hlavička s linkou, světlý obsah a tlumená patička.

Rozvržení se nezměnilo. Změnily se jen barvy, layout a vzhled jsou dvě oddělené vrstvy.

Responzivita

Na mobilu skoro beze změny

Bloky pod sebou fungují na každé šířce. Kostra je responzivní sama od sebe. Na telefonu jen zmenšíme padding.

Patička zůstává dole i na telefonu. Přepněte klávesou M a porovnejte.

Recept

Kostra stránky v kostce

header, main, footer přímo v body
prostřední řádek 1fr drží patičku dole
.wrap uvnitř bloků srovná obsah na střed
při stavbě si oblasti obarvěte, nakonec uklidíte

Další: Úzký sloupec →