Layout
Obsah a sidebar
Široký sloupec pro obsah a vedle něj úzký sidebar. Na mobilu se sidebar přesune pod obsah.
Typický layout blogů, e-shopů a dokumentace. V náhledu vidíte, kam se dostaneme.
Struktura
Obsah a sidebar ve společném wrapperu
Kostra je stejná jako v lekci Kostra stránky. Mezi hlavičku a patičku vložíme wrapper .layout a v něm main a aside.
Oblasti jsme si zase obarvili: obsah červeně, sidebar modře.
Grid
Pružný obsah, pevný sidebar
Wrapper rozdělíme na dva sloupce. Sidebar má pevných 280 pixelů a obsah dostane zbytek, tedy 1fr (jeden díl volného místa).
Všimněte si, že modrý sidebar je stejně vysoký jako obsah. Grid natahuje všechny buňky v řádku na stejnou výšku.
Šířka
Omezit a vycentrovat
Na velkém monitoru by se oba sloupce roztáhly do stran. Celý wrapper proto omezíme a vycentrujeme, stejně jako .wrap v kostře.
Chcete sidebar vlevo? Stačí prohodit sloupce v CSS: 280px 1fr a sidebaru dát grid-column: 1; grid-row: 1. HTML zůstane stejné.
Sticky sidebar
Sidebar, který jede s vámi
S position: sticky zůstane sidebar při skrolování na očích. Musí ale přestat být natažený na výšku obsahu, jinak se nemá kam posouvat.
align-self: start vrátí sidebaru jeho přirozenou výšku. Skrolujte v náhledu a sidebar pojede s vámi.
Úklid
Finální vzhled
Rozvržení drží, pomocné barvy nahradíme klidným vzhledem. Sidebar dostane border, aby se oddělil od obsahu.
Grid, šířka i sticky zůstaly stejné. Změnil se jen vzhled.
Problém
Dva sloupce na telefonu
Sidebar si drží svých 280 pixelů a na obsah nezbývá skoro nic. Stránka přetéká do strany.
Responzivita
Jeden sloupec a sidebar pod obsahem
Pod určitou šířkou nastavíme gridu jediný sloupec. Sticky vypneme, protože na telefonu by sidebar zakrýval obsah.
Breakpoint 700 px volíme podle obsahu, ne podle konkrétního telefonu: tam, kde se obsah začne mačkat.
Recept
Obsah a sidebar v kostce
- obsah
1fr, sidebar pevná šířka - v HTML nejdřív obsah, potom sidebar
- sticky sidebar potřebuje
align-self: start - breakpoint podle obsahu, ne podle zařízení