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

Короткий ответ

Flexbox — одномерная раскладка: элементы выстраиваются по одной оси, в строку или в колонку. Размеры определяются содержимым, а контейнер распределяет свободное место.

CSS Grid — двумерная раскладка: вы задаёте строки и колонки, и элементы встают в ячейки этой сетки. Сначала задаётся структура, потом в неё помещается контент.

Практическое правило: если важно выравнивание по одной линии — Flexbox, если элементы должны совпадать и по горизонтали, и по вертикали — Grid.

Главное различие: content-first против layout-first

• В Flexbox размер элемента «растёт» из контента. Три кнопки разной длины займут разную ширину, и это нормально.
• В Grid размеры задаёт контейнер. Карточки в каталоге будут одинаковой ширины, даже если текст в них разный.

Отсюда простой вопрос перед вёрсткой: кто главный — контент или сетка?

Сравнение

Когда выбирать Flexbox

• Навигация и тулбары: логотип слева, меню справа.
• Группы кнопок, теги, иконка + текст.
• Центрирование одного элемента.
• Строка, где один элемент растягивается, а остальные занимают ровно столько, сколько нужно.

.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.toolbar .search {
  flex: 1; /* занимает всё свободное место */
}

Когда выбирать CSS Grid

• Каркас страницы: шапка, сайдбар, контент, подвал.
• Каталоги и галереи, где карточки должны стоять ровными рядами.
• Формы с выравниванием подписей и полей.
• Наложение текста на изображение без position: absolute.

Адаптивная сетка карточек без медиазапросов:

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

Лучший вариант — вместе

Чаще всего самая чистая вёрстка использует оба инструмента на разных уровнях:

1. Grid задаёт каркас: страница, секции, сетка карточек.
2. Flexbox раскладывает содержимое внутри ячейки: заголовок, цена и кнопка внутри карточки.

.card {
  display: flex;
  flex-direction: column;
}
.card .button {
  margin-top: auto; /* кнопка прижата к низу во всех карточках */
}

Ещё один полезный приём — subgrid: вложенная сетка наследует линии родителя, и заголовки в соседних карточках выравниваются по одной высоте. Поддержка в современных браузерах есть, но проверяйте её для своей аудитории.

Частые ошибки

• Сетка на Flexbox с вычислением ширин через calc() и отрицательные отступы — Grid решает это одной строкой.
• Grid для простого ряда кнопок — лишняя сложность, Flexbox проще.
• Отступы через margin вместо gap, который работает в обоих инструментах.
• Смена визуального порядка через order или расстановку в Grid без изменения HTML — это ломает порядок для клавиатуры и скринридеров.

Как решить за минуту

1. Элементы в одну линию и их размер зависит от контента? — Flexbox.
2. Нужны ровные ряды и колонки одновременно? — Grid.
3. Есть внешний каркас и внутреннее содержимое? — Grid снаружи, Flexbox внутри.