Урок 28. Теория: grid-area и сложные сетки

Главная идея

В уроке 27 вы расставляли элементы по номерам линий (grid-column: 1 / 3). Это работает, но читается плохо: глядя на цифры, трудно понять, что это «шапка на всю ширину». grid-template-areas переворачивает подход: вы рисуете макет словами прямо в CSS. Это главная фишка урока — самый наглядный способ собрать классический макет «шапка / боковое меню / контент / подвал».

Как это работает

Механизм состоит из двух частей, которые работают в паре:

• grid-template-areas задаётся на контейнере. Это набор строк в кавычках. Каждая строка — один ряд сетки, каждое слово в строке — одна ячейка-колонка. Повторяя имя по горизонтали или вертикали, вы растягиваете область на несколько ячеек — но область обязана быть прямоугольной.
• grid-area: имя задаётся на дочернем элементе и говорит: «помести меня в область с этим именем». Имена в CSS — без кавычек.
• Точка . на месте слова означает пустую ячейку — в неё ничего не попадёт.
• Ширины колонок и высоты строк по-прежнему задают grid-template-columns и grid-template-rows; areas лишь раскладывают элементы по уже размеченным трекам.

Вот тот же макет в виде схемы — обратите внимание, как header и footer тянутся на обе колонки, потому что их имя повторено:

Базовый CSS

Эта запись 1-в-1 повторяет схему выше: три строки карты = три ряда, два слова в строке = две колонки.

.page {
  display: grid;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  grid-template-columns: 16rem 1fr;   /* боковое меню фиксировано, контент тянется */
  grid-template-rows: auto 1fr auto;  /* шапка и подвал по содержимому, контент — остальное */
  gap: 1rem;
}

.site-header { grid-area: header; }
.sidebar     { grid-area: sidebar; }
.content     { grid-area: content; }
.site-footer { grid-area: footer; }

Когда применять

areas незаменимы для каркаса страницы (header/sidebar/main/footer) и любых статичных двумерных макетов, где важна читаемость. Огромный плюс — перестановка без правки HTML: чтобы в мобильной версии убрать sidebar или поставить его снизу, достаточно переписать карту areas внутри медиа-запроса, разметка остаётся прежней. Для одномерных линий (ряд кнопок, меню в строку) проще Flexbox — об этом отдельный урок 29.

Частая ошибка

Карта должна образовывать прямоугольную сетку: во всех строках одинаковое число ячеек, а каждая именованная область — связный прямоугольник. «Лесенка» вроде "a a" "a ." с разорванной областью — невалидна, и весь шаблон молча игнорируется.