Урок 28. Справочник: grid-area и сложные сетки

📁 Раздел: CSS Grid ⏱️ Время изучения: ~65 мин 🎯 Сложность: Средняя
#grid-template-areas #grid-area #grid-template-columns #grid-template-rows #grid-template #gap

⚡ Кратко

Главные свойства урока: grid-template-areas (карта на контейнере) и grid-area (имя области на элементе). Точка . — пустая ячейка.

Мини-справочник

Свойство / понятиеГде задаётсяНазначение
grid-template-areasконтейнерКарта макета строками в кавычках. Каждая строка — ряд, каждое слово — ячейка-колонка. Повтор имени растягивает область (область обязана быть прямоугольной).
grid-area: имяэлементПомещает элемент в одноимённую область из карты. Имя — без кавычек.
grid-area: r/c/r/cэлементШорткат по линиям: row-start / column-start / row-end / column-end. Альтернатива именам.
. (точка)в карте areasПустая ячейка — в неё не попадает ни один элемент.
grid-template-columnsконтейнерШирины колонок (треков), на которые опираются области. Напр. 16rem 1fr.
grid-template-rowsконтейнерВысоты строк. Часто auto 1fr auto для шапки/контента/подвала.
grid-templateконтейнерШорткат: задаёт areas, rows и columns одним свойством.
gapконтейнерПромежуток между ячейками (бывшие grid-gap / row-gap + column-gap).

Шаблон «копировать-вставить»

📄 lesson-28/layout.css
.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;
  min-height: 100vh;
}
.site-header { grid-area: header; }
.sidebar     { grid-area: sidebar; }
.content     { grid-area: content; }
.site-footer { grid-area: footer; }
Как проверять: включите Grid overlay в DevTools (F12) — браузер подпишет имена областей, линии и gap прямо на странице.

Навигация