Šířka obsahu na velkých obrazovkách

Teď opačný konec: velké obrazovky. Přepněte náhled na 1280 px. Stránka vyplňuje celou šířku: logo je úplně vlevo a tlačítko Přispět úplně vpravo. Na monitoru širokém 1920 px by byla každá karta široká přes 400 px a texty kroků by běžely v dlouhých řádcích. Čím širší obrazovka, tím dál od sebe všechno je.

Proto má obsah většiny webů maximální šířku a drží se uprostřed, zatímco pozadí sekcí dál vede přes celou obrazovku. Obě třídy znáte z lekce Mezery a rozměry: max-w-* nastaví maximální šířku a mx-auto prvek vycentruje. Pro obsah stránky se běžně používají šířky od max-w-5xl (64rem, 1024 px) do max-w-7xl (80rem, 1280 px).

Nedáváme je přímo sekcím, protože pak by byla úzká i jejich pozadí. Patří prvku uvnitř každé sekce, ve kterém je její obsah:

<section class="bg-white px-4 md:px-8">
	<div class="mx-auto max-w-5xl">...</div>
</section>

Tyto třídy předponu nepotřebují. Blokový prvek je i tak široký jako jeho rodič a max-w-5xl mu jen nedovolí přerůst 1024 px. Na úzké obrazovce tedy rodiče prostě vyplní, stejně jako u max-width v závěrečném projektu kurzu CSS.

Když má veškerý obsah stránky stejnou maximální šířku, začíná i končí na stejném místě, od záhlaví až po zápatí.