Макет страницы с областями

Сетка отлично подходит и для макета целой страницы. На нашей странице четыре части: шапка (header), меню (nav), основное содержимое (main) и подвал (footer). Поместим меню слева от содержимого, шапку над ними, а подвал под ними, причём шапку и подвал растянем на всю ширину.

Можно было бы расставить каждую часть по номерам линий сетки, но есть способ нагляднее: частям сетки можно дать имена и нарисовать макет прямо в CSS. Значение свойства grid-template-areas состоит из текстовых значений в кавычках — по одному на каждую строку сетки. В каждом из них мы пишем имя для каждого столбца этой строки. Соседние ячейки с одинаковым именем вместе образуют одну область.

body {
	display: grid;
	grid-template-columns: 8rem 1fr;
	grid-template-areas:
		"header header"
		"menu content"
		"footer footer";
}

В этой сетке два столбца и три строки. Область header занимает оба столбца первой строки, menu и content делят вторую строку, а footer занимает всю последнюю строку. Столбец меню имеет ширину 8rem, а содержимое получает всё остальное. Имена областей мы придумываем сами, они не обязаны совпадать с названиями элементов. Каждое имя — одно слово без пробелов.

Затем свойством grid-area мы сообщаем каждому элементу, к какой области он относится. Здесь имя пишется без кавычек:

nav {
	grid-area: menu;
}

Нужно помнить две вещи: во всех строках должно быть одинаковое число имён, а каждая область должна быть прямоугольником. Иначе браузер проигнорирует всё объявление целиком. Ячейка, которая должна остаться пустой, обозначается точкой (.).