Урок 30. Ошибки: Когда что использовать + мини-проект 4

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

⚡ Кратко

Главные грабли урока: не тот инструмент под задачу, кривые grid-template-areas и Grid там, где хватило бы одной строки Flex.

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

Ошибка 1. Grid ради ряда из двух кнопок

Одномерный ряд — это работа Flexbox. Grid здесь добавляет лишние свойства и усложняет правки.

Так правильно — Flex:
Отмена ОК 
/* перебор: Grid для ряда из двух кнопок */
.actions { display: grid; grid-template-columns: auto auto; }

/* проще и яснее */
.actions { display: flex; gap: .5rem; }

Ошибка 2. Неровные строки в grid-template-areas

Как ломается: в строках разное число имён колонок — браузер считает шаблон невалидным и grid-template-areas игнорируется целиком, макет «рассыпается».
/* ОШИБКА: в первой строке 3 колонки, во второй — 2 */
grid-template-areas:
  "header header header"
  "nav    main";        /* не хватает третьей колонки! */

/* ПРАВИЛЬНО: одинаковое число ячеек в каждой строке.
   Пустую ячейку обозначай точкой: */
grid-template-areas:
  "header header header"
  "nav    main   .";

Ошибка 3. Grid-свойства на не-контейнере

Симптом: grid-area/grid-column на элементе не работают, потому что у его родителя нет display: grid. Свойства размещения действуют только на прямых детях grid-контейнера.

Ошибка 4. Путать линии и области

grid-column: 1 / 3 работает с номерами линий, а grid-area: main — с именем области из grid-template-areas. Смешивать в одном правиле нельзя.
Диагностика: включи Grid overlay в DevTools и сверь, совпадает ли видимая сетка с твоей мысленной моделью. Если области не подсветились — почти наверняка ошибка 2 или 3.

Навигация