Ошибка 1 — двумерная сетка на flex-wrap
Самая частая ошибка: галерею карточек собирают на Flexbox с flex-wrap: wrap.
Карточки переносятся, но в неполном ряду они не выравниваются по колонкам — Flexbox знает только линию.
❌ Flexbox + flex-wrap: последний ряд «плывёт»
1
2
3
4
5
✅ Grid: ровные колонки и ряды
1
2
3
4
5
/* ❌ колонки не выравниваются */
.gallery { display: flex; flex-wrap: wrap; gap: .5rem; }
/* ✅ настоящая 2D-сетка */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }Ошибка 2 — Grid там, где хватило бы Flexbox
Что не так: для одного ряда кнопок объявляют Grid с шаблоном колонок.
Это работает, но усложняет код: при добавлении кнопки приходится править
grid-template-columns.
Flexbox растянет ряд сам.Признак: если ты пишешь
grid-template-columns ради одной линии
элементов — почти наверняка нужен display: flex.Ошибка 3 — margin вместо gap
Что не так: промежутки между элементами делают через
margin
и потом борются с «лишним» отступом по краям. И Flexbox, и Grid поддерживают gap —
используй его.Ошибка 4 — flex/grid-свойства не на том элементе
Что не так:
justify-content пишут на элементе вместо
контейнера, или ждут эффекта grid-column там, где родитель не display: grid.
Flex-свойства распределения живут на контейнере; grid-placement работает только внутри grid-контейнера.Диагностика: включи overlay в DevTools (бейдж
flex/grid)
и сверь, совпадает ли видимая раскладка с твоей mental model. Если бейджа нет — display
стоит не на том элементе.