Rozvržení stránky pomocí oblastí

Mřížka se skvěle hodí i pro rozvržení celé stránky. Naše stránka má čtyři části: záhlaví (header), menu (nav), hlavní obsah (main) a zápatí (footer). Menu dáme doleva vedle obsahu, záhlaví nad ně a zápatí pod ně, obojí přes celou šířku.

Jednotlivé části bychom mohli umístit pomocí čísel čar mřížky, ale existuje přehlednější způsob: části mřížky si můžeme pojmenovat a rozvržení v CSS nakreslit. Hodnota vlastnosti grid-template-areas (šablona oblastí) obsahuje jeden řetězec (text v uvozovkách) pro každý řádek mřížky. Do řetězce napíšeme jméno pro každý sloupec tohoto řádku. Sousední buňky se stejným jménem tvoří dohromady jednu oblast.

body {
	display: grid;
	grid-template-columns: 8rem 1fr;
	grid-template-areas:
		"zahlavi zahlavi"
		"menu obsah"
		"zapati zapati";
}

Tato mřížka má dva sloupce a tři řádky. Oblast zahlavi zabírá oba sloupce prvního řádku, menu a obsah si dělí druhý řádek a zapati zabírá celý poslední řádek. Sloupec s menu je široký 8rem a obsah dostane zbytek. Jména oblastí si vymýšlíme sami a nemusí se shodovat s názvy prvků. Každé jméno je jedno slovo bez mezer.

Potom vlastností grid-area (oblast mřížky) řekneme každému prvku, do které oblasti patří. Jméno se tu píše bez uvozovek:

nav {
	grid-area: menu;
}

Na dvě věci je potřeba dát pozor: všechny řetězce musí mít stejný počet jmen a každá oblast musí mít tvar obdélníku. Jinak prohlížeč celou deklaraci ignoruje. Buňku, která má zůstat prázdná, označíme tečkou (.).