Компоновка «священный грааль» с Grid

Макет «Святой Грааль» — классический шаблон веб-дизайна: страница на всю высоту с шапкой, нижним колонтитулом и центральной секцией из трёх столбцов (левая боковая панель, основное содержимое, правая боковая панель). Раньше создать его с помощью плавающих элементов было крайне сложно, но CSS-сетка делает это тривиальным.

Определите макет с именованными областями и строками шаблона: grid-template-areas отображает визуальную структуру. Три столбца и три строки (шапка занимает все столбцы, нижний колонтитул занимает все столбцы, в средней части находятся три столбца) описывают весь макет в удобной для чтения ASCII-диаграмме.

Каждый дочерний элемент ссылается на свою область по имени: header { grid-area: header }, main { grid-area: main }, nav { grid-area: sidebar }, aside { grid-area: aside }, footer { grid-area: footer }. Сетка размещает их автоматически.

Средняя строка использует 1fr, который заполняет всю оставшуюся высоту области просмотра после шапки и нижнего колонтитула фиксированной высоты. Благодаря этому боковые панели и основное содержимое всегда растягиваются на всю высоту области просмотра — явные вычисления высоты не нужны.

На мобильных устройствах с помощью медиазапроса переопределите grid-template-areas, задав стек из одного столбца: шапка, боковая панель, основное содержимое, боковая область и нижний колонтитул, расположенные вертикально. Порядок DOM сохраняется, меняется только визуальный шаблон сетки. Области сетки делают адаптивную перестройку понятной.

На планшетах удалите правую боковую область и расширьте основное содержимое: переопределите шаблон как "header header" "sidebar main" "footer footer" с помощью grid-template-columns: 240px 1fr. Задайте aside { display: none } или переместите боковую область под основное содержимое в определении областей.

Добавьте промежуток между дорожками сетки: gap: var(--spacing-4). Применяйте внутренние отступы внутри каждой области, а не к контейнеру сетки, чтобы сохранить единообразное расстояние. Шапка и нижний колонтитул обычно получают собственные горизонтальные отступы, соответствующие выравниванию сетки по максимальной ширине.

Область основного содержимого сама может быть сеткой — статья в двух столбцах и боковая панель внутри основной области. Вложенные сетки создают раскладку содержимого внутри оболочки страницы без сложных иерархий классов или глубоко вложенного позиционирования.

Сделайте шапку прилипающей: header { position: sticky; top: 0; z-index: 10; }. В макете сетки прилипающее позиционирование дочернего элемента сетки работает ожидаемым образом: шапка остаётся на месте, пока основное содержимое, боковая панель и боковая область прокручиваются под ней.

Обе боковые панели могут быть прилипающими: nav, aside { position: sticky; top: 0; height: 100vh; overflow-y: auto; }. Они остаются видимыми, пока прокручивается основное содержимое, создавая макет из трёх панелей, в котором прокручивается только центральная область.

Используйте сетку CSS для двумерных макетов оболочки страницы, таких как макет «Святой Грааль»: сетка отлично подходит для одновременного размещения элементов в именованных строках и столбцах. Используйте флексбокс для одномерных макетов компонентов (элементы навигации в строке, содержимое карточки в столбце) внутри областей сетки.

CSS-сетка делает исторически сложный макет «Святой Грааль» тривиальным: grid-template-areas задаёт имена областям, 1fr для средней строки заполняет высоту области просмотра, а медиазапросы переопределяют карту областей для адаптивного сворачивания. Прилипающие шапки и боковые панели добавляются без лишней сложности.