Урок 27. Ошибки: Строки, колонки и grid-template

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

⚡ Кратко

Главные грабли урока: auto-fit без minmax(), путаница линий и span, span на контейнере вместо элемента, лишний Grid там, где хватит Flexbox.

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

Ошибка 1 — auto-fit без minmax()

Как ломается: repeat(auto-fit, 1fr) не работает как ожидается — браузер не знает минимальной ширины трека и не может подобрать число колонок. Сетка либо схлопывается, либо не переносит карточки.
/* ❌ неправильно */
.cards { grid-template-columns: repeat(auto-fit, 1fr); }

/* ✅ правильно */
.cards { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

Ошибка 2 — span на контейнере вместо элемента

Как ломается: grid-column/grid-row/span — свойства элемента (grid-item). На контейнере они не действуют.
/* ❌ span задан контейнеру — игнорируется */
.cards { display: grid; grid-column: span 2; }

/* ✅ span задан дочерней карточке */
.card--wide { grid-column: span 2; }

Ошибка 3 — путать номера линий и количество треков

Как ломается: чтобы занять 2 колонки от первой линии, пишут grid-column: 1 / 2 (это всего один трек). Линий на одну больше, чем треков: для двух треков нужно 1 / 3 или span 2.
/* ❌ один трек, а не два */
.hero { grid-column: 1 / 2; }

/* ✅ два трека: от линии 1 до линии 3 */
.hero { grid-column: 1 / 3; }   /* или: span 2 */

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

Как ломается: для простого ряда кнопок или тегов Grid избыточен — Flexbox короче и гибче по содержимому. Grid берут для двумерных раскладок.
Диагностика: включите Grid overlay (DevTools) и сверьте видимые линии и треки со своей mental model — расхождение сразу покажет, где ошибка в шаблоне или в размещении.

Навигация