Урок 26. Ошибки: Введение в CSS Grid

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

⚡ Кратко

Топ-3: (1) grid-template-columns без display: grid — игнорируется; (2) ждать переноса как во Flexbox; (3) брать Grid там, где хватило бы Flexbox.

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

Ошибка 1: шаблон колонок без display: grid

Самая частая. grid-template-columns написан, а display: grid забыт — браузер просто игнорирует свойство, и блоки остаются обычным потоком (по одному на строку).

❌ Как ломается (нет display:grid)

1
2
3

✓ Как правильно

1
2
3
/* ❌ свойство проигнорировано */
.gallery {
  grid-template-columns: repeat(3, 1fr);
}

/* ✓ сначала включаем grid */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
Ошибка 2: ждать переноса элементов «по ширине», как во Flexbox с flex-wrap. В Grid число колонок задано шаблоном жёстко — лишние элементы создают новые строки по авто-размещению, а не переносятся внутри текущей.
Ошибка 3: путать единицу fr и проценты. 1fr делит остаток места после фиксированных колонок и gap, а 33% считается от всей ширины и вместе с gap легко вызывает переполнение.
Ошибка 4: тянуть Grid в простую горизонтальную ленту (ряд кнопок, навигация) — там Flexbox короче и гибче. Grid — для двумерных макетов.
Диагностика: включите Grid overlay в DevTools и сверьте, совпадает ли видимая сетка с тем, что вы задумали: видны ли линии и треки вообще (если нет — забыт display: grid).

Навигация