Layout

Pojmenované oblasti

Rozvržení stránky nakreslíte přímo v CSS, jako obrázek ze jmen oblastí. Pro jinou obrazovku ho prostě překreslíte.

Nejnázornější způsob, jak navrhnout layout. V náhledu vidíte, kam se dostaneme.

Struktura

Pět oblastí přímo v `body`

Tentokrát nepotřebujeme žádný wrapper. Gridem bude samotné body a jeho přímí potomci budou oblasti layoutu.

Oblasti jsou zase obarvené, abychom viděli, kde která je.

Jména

Každá oblast dostane jméno

Vlastnost grid-area dá prvku jméno. Může být jakékoli. Pro přehlednost použijeme stejná jména, jako mají elementy.

V náhledu se zatím nic nezměnilo. Jména jsou jen štítky, layout z nich nakreslíme v dalším kroku.

Obrázek

Nakreslete layout

V grid-template-areas je každý string v uvozovkách jeden řádek gridu a každé slovo jedna buňka. Když se jméno opakuje, oblast se roztáhne přes víc buněk.

Mezery mezi jmény nehrají roli. Jména zarovnaná pod sebe ale tvoří obrázek, ve kterém layout vidíte na první pohled.

Překreslení

Jiný layout, jeden řádek změny

Chceme, aby navigace vedla až dolů a patička byla jen pod obsahem. Stačí v obrázku přepsat poslední řádek.

HTML ani pravidla pro jednotlivé oblasti se nezměnily. Změnil se jen obrázek.

Pozor

Každá oblast musí být obdélník

Oblast ve tvaru písmene L nebo rozdělená na dva kusy není dovolená. Prohlížeč takové pravidlo celé zahodí a z layoutu nezbude nic.

Další pravidla

každý řádek má stejný počet buněk
prázdnou buňku označíte tečkou: .

Úklid

Finální vzhled

Pomocné barvy nahradíme klidným vzhledem. Při úklidu jsme grid-area přesunuli do pravidel jednotlivých oblastí, ať je všechno o jedné oblasti pohromadě.

Obrázek v body se nezměnil, layout zůstal stejný.

Responzivita · tablet

Pro tablet nový obrázek

Tady se pojmenované oblasti vyplatí nejvíc. Pro užší obrazovku jen nakreslíme jiný obrázek: dva sloupce a tip pod obsahem.

Porovnejte s lekcí Tři sloupce. Tam jsme přesouvali jednotlivé prvky pomocí grid-column a grid-row, tady jen překreslíme obrázek.

Responzivita · telefon

Pro telefon jeden sloupec

Na telefonu je obrázek nejjednodušší: jeden sloupec, každá oblast na vlastním řádku. Pořadí určuje obrázek, ne HTML.

Chcete na telefonu tip nad obsahem? Prohoďte v obrázku řádky "main" a "aside".

Recept