Flexbox и Grid: когда что использовать

Правило в одну строку

Flexbox — для одного направления. Ряд или колонка.

Grid — для двух направлений сразу. Сетка со строками и столбцами.

Это правило покрывает девяносто процентов случаев. Дальше — подробности и оговорки.

Flexbox: когда

Всё, что выстраивается в линию:

панель навигации;
кнопки в ряд;
карточка, где картинка слева, текст справа;
элемент, прижатый к краю;
центрирование чего-то одного.

Основная идея: есть главная ось и поперечная. Вы управляете тем, как элементы распределяются вдоль главной и как выравниваются поперёк.

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

Три строки решают задачу, на которую раньше уходили обтекания и хитрости.

Grid: когда

Всё, что раскладывается в сетку:

галерея карточек;
общая раскладка страницы: шапка, боковая колонка, содержимое, подвал;
таблицеподобные блоки;
сложные формы с выравниванием по столбцам.

Основная идея: вы описываете сетку, а потом раскладываете элементы по её ячейкам.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

Эта запись делает адаптивную галерею без единого правила для разных размеров экрана: колонок будет столько, сколько влезет, но не уже указанной ширины.

Как выбрать в спорном случае

Спросите себя: важно ли мне управлять и строками, и столбцами одновременно?

Да — сетка. Нет — гибкая раскладка.

Второй вопрос: кто главный — контейнер или содержимое? Если вы задаёте структуру заранее и раскладываете по ней — сетка. Если элементы сами распределяются по доступному месту — гибкая раскладка.

Их можно и нужно сочетать

Обычная практика: общая раскладка страницы на сетке, а внутри каждого блока — гибкая раскладка для содержимого.

Это не компромисс, а нормальный подход: механизмы дополняют друг друга.

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

Отступы через внешние поля вместо промежутков. Свойство промежутка работает в обоих механизмах и избавляет от возни с полями у крайних элементов.

Фиксированные высоты. Раскладка ломается, как только текста стало больше. Задавайте минимальную высоту, а не точную.

Сетка там, где хватило бы одной линии. Усложняет без пользы.

Забытое поведение при сжатии. Элементы гибкой раскладки по умолчанию могут сжиматься меньше содержимого, из-за чего текст обрезается. Лечится указанием минимального размера.

Слишком много вложенных контейнеров. Пять уровней раскладки друг в друге — признак того, что структура придумана на ходу.

Что учить первым

Гибкую раскладку: она нужна чаще и проще для понимания. Сетку — сразу после, потому что без неё общая раскладка страницы получается неуклюжей.

Обе темы осваиваются за неделю практики, если сразу верстать что-то настоящее, а не читать про свойства.