Урок 28. Ошибки: grid-area и сложные сетки

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

⚡ Кратко

Самые частые промахи: неодинаковое число ячеек в строках карты, непрямоугольная область, имя в карте не совпадает с grid-area, и Grid там, где хватило бы Flexbox.

Типичные ошибки

Ошибка 1. Разное число ячеек в строках карты

Все строки grid-template-areas должны содержать одинаковое количество слов. Если в одной строке два имени, а в другой три — весь шаблон молча игнорируется, и элементы сваливаются в авто-сетку. Ниже карта сломана, поэтому имена не сработали:

header
sidebar
main
/* ❌ строки разной длины — шаблон невалиден, areas игнорируются */
.page {
  grid-template-areas:
    "header header"   /* 2 ячейки */
    "sidebar";        /* 1 ячейка  */
}
Как правильно: выровняйте число ячеек во всех строках; для пустого места используйте точку . — "sidebar .".

Ошибка 2. Непрямоугольная область

Именованная область обязана быть связным прямоугольником. «Лесенка» вроде "a a" "a ." невалидна — браузер отбросит весь шаблон.

Ошибка 3. Имя в карте ≠ grid-area

Если в карте написано content, а у элемента grid-area: main; — элемент не попадёт в область и уедет в неявную ячейку. Имена должны совпадать буква-в-букву (и без кавычек в grid-area).

Ошибка 4. Grid там, где хватило бы Flexbox

Для одномерного ряда (кнопки, теги, меню в строку) Grid избыточен — проще display: flex; gap: …. Grid берём, когда раскладка действительно двумерная.
Диагностика: включите Grid overlay (F12). Если подписи областей не появились — значит шаблон невалиден (см. ошибки 1–2); проверьте длину строк и прямоугольность областей.

Навигация