Размещать элементы по номерам линий точно, но не всегда наглядно: глядя на grid-column: 1 / 3, не сразу поймёшь, что это шапка. Для макетов целой страницы — шапка, боковая колонка, контент, подвал — есть куда более читаемый способ: назвать области словами и нарисовать структуру прямо в CSS. Этим занимается связка grid-template-areas и grid-area. Код такого макета выглядит как схема страницы, и в нём легко разобраться даже спустя время.

После этого урока вы сможете задавать макеты именованными областями — быстро собирать типовые раскладки страниц и менять их, просто перерисовав «карту» в стилях.

Что уже умеем / что добавим

Вы умеете размещать элементы по линиям через grid-column, grid-row и grid-area с номерами. Теперь освоим самый наглядный подход — именованные области. В сквозном проекте мы соберём каркас страницы: шапка, основной контент, боковая колонка и подвал — единой картой областей.

Что вы узнаете в рамках статьи

• Как называть области сетки через grid-template-areas.
• Как привязывать элемент к области свойством grid-area.
• Как «рисовать» структуру макета прямо в CSS.
• Как растягивать область на несколько ячеек и оставлять пустые места.

Ключевые термины

• grid-template-areas — карта сетки из имён областей, заданная строками.
• Область (area) — прямоугольный участок сетки под одним именем.
• grid-area: имя — привязка элемента к именованной области.
• Точка (.) — обозначение пустой ячейки в карте областей.

Называем области

Свойство grid-template-areas задаёт карту сетки: каждая строка в кавычках — это ряд ячеек, а слова внутри — имена областей. Одинаковое имя в соседних ячейках объединяет их в одну область.

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}

Здесь мы описали сетку 2×3. Верхняя строка целиком — область header, нижняя целиком — footer, а в средней слева sidebar, справа content. Обратите внимание: карта в коде визуально повторяет будущий макет страницы — это и есть главное удобство подхода.

Привязываем элементы к областям

Сами по себе имена ничего не размещают — нужно сказать каждому элементу, какую область он занимает. Это делает свойство grid-area с именем области:

<div class="layout">
  <header class="header">Шапка</header>
  <aside class="sidebar">Меню</aside>
  <main class="content">Контент</main>
  <footer class="footer">Подвал</footer>
</div>

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

Теперь каждый элемент встаёт в свою именованную область, независимо от порядка в HTML. Браузер сам растянет header на оба столбца, потому что в карте это имя занимает обе ячейки строки. Получился классический макет страницы, и он читается в CSS как схема.

Рисуем макет в CSS

Сила grid-template-areas в том, что перестроить макет — значит просто перерисовать карту. Хотите убрать боковую колонку из первой строки контента и растянуть контент на всю ширину? Меняете только строки карты:

.layout {
  grid-template-areas:
    "header  header"
    "content content"
    "footer  footer";
}

Элементы и их привязки трогать не нужно — достаточно новой карты. Это делает эксперименты с раскладкой быстрыми и безопасными. Если какое-то имя исчезает из карты (например, sidebar), соответствующий элемент просто не отобразится в сетке — но обычно карту и элементы держат согласованными.

Пустые ячейки и растягивание

Иногда ячейку нужно оставить пустой — для этого в карте ставят точку . вместо имени:

.layout {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "header header header"
    "content content ."
    "footer footer footer";
}

Здесь правая ячейка средней строки останется пустой. А чтобы растянуть область на несколько ячеек, достаточно повторить её имя в соседних клетках — как мы делали с header header header на всю ширину. Важное правило: карта должна образовывать прямоугольник — во всех строках одинаковое число ячеек, а каждая область должна быть прямоугольной (нельзя раскидать одно имя буквой «Г»). Соблюдая это, вы легко собираете любые типовые раскладки.

Применяем в проекте

Соберём каркас страницы сайта компании единой картой областей: шапка сверху во всю ширину, под ней контент и боковая колонка, а внизу подвал.

.page {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 20px;
  grid-template-areas:
    "header  header"
    "main    aside"
    "footer  footer";
}

.page__header { grid-area: header; }
.page__main   { grid-area: main; }
.page__aside  { grid-area: aside; }
.page__footer { grid-area: footer; }

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

Частые ошибки

• Разное число ячеек в строках.
  Все строки карты должны содержать одинаковое количество имён, иначе правило игнорируется.
• Непрямоугольная область.
  Одно имя должно образовывать прямоугольник; «уголки» и разрывы недопустимы.
• Забыли привязать элемент.
  Имя в карте работает только вместе с grid-area: имя у самого элемента.
• Пропущены кавычки.
  Каждый ряд карты — строка в кавычках; без них браузер не поймёт разметку.

Итоги

Великолепно — теперь вы умеете рисовать макеты словами! Вы научились называть участки сетки через grid-template-areas, привязывать к ним элементы свойством grid-area, оставлять пустые ячейки точкой и растягивать области повтором имени. Каркас вашего сайта теперь описан наглядной картой, которую легко читать и перестраивать. Это один из самых удобных инструментов вёрстки страниц.

Отличная работа! В следующем уроке мы завершим раздел о Grid: разберём вложенные сетки и subgrid, а также научимся выбирать между Flexbox и Grid в зависимости от задачи.