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

Flexbox и CSS Grid — два современных модуля макетирования в CSS. Оба решают задачи раскладки, но работают по разным принципам. Понимание их отличий помогает выбирать правильный инструмент для каждой задачи и писать более предсказуемый и поддерживаемый код.

Одномерность и двумерность

Главное концептуальное различие: Flexbox — одномерная система (ряд или колонка), Grid — двумерная (строки и столбцы одновременно).

Flexbox: одна ось за раз

Flexbox располагает элементы вдоль главной оси. При flex-wrap: wrap элементы переносятся, но каждая строка — отдельный flex-контейнер. Выравнивание между строками контролируется align-content, но связи между элементами в разных строках нет.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.flex-item {
  flex: 1 1 200px;
}

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

Grid: строки и столбцы

Grid определяет явную сетку: количество и размеры столбцов и строк. Элементы размещаются в ячейках, выравнивание по обеим осям контролируется независимо.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

Каждый столбец имеет минимальную ширину 200px и максимальную 1fr. Сетка остаётся предсказуемой независимо от количества элементов.

Сравнительная таблица

Критерий	Flexbox	CSS Grid
Измерения	Одномерный (ряд или колонка)	Двумерный (строки и столбцы)
Управление	Контейнер + элементы	В основном контейнер
Размеры	Гибкие, основаны на content	Явные или неявные треки
Выравнивание	По главной и поперечной осям	По обеим осям независимо
Вложенность	Часто используется	Меньше необходимости
Обратный порядок	flex-direction: row-reverse	direction: rtl или order

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

Компоненты интерфейса

Кнопки с иконками, навигационные меню, хедеры, футеры — типичные одномерные раскладки:

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

Центрирование

Центрирование по вертикали и горизонтали — классическая задача для Flexbox:

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

Подробнее о паттернах центрирования — в статье Центрирование в CSS с Flexbox: все способы.

Распределение пространства в одном направлении

Когда нужно равномерно распределить элементы в ряд или колонку:

.toolbar {
  display: flex;
  justify-content: space-between;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

Контент с переменным количеством элементов

Списки, теги, чипы — количество элементов неизвестно, важно гибкое поведение:

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

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

Сетки карточек и галереи

Каталоги товаров, галереи изображений, ленты новостей — классические двумерные сетки:

.catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

Сложные макеты страниц

Макеты с header, sidebar, main, footer, где нужны выравнивание по строкам и столбцам:

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

Асимметричные раскладки

Когда элементы занимают разное количество ячеек:

.masonry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
}

.item-featured {
  grid-column: span 2;
  grid-row: span 2;
}

Точное позиционирование

Когда нужен контроль над размещением каждого элемента:

.dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1rem;
}

.widget-a { grid-column: 1; grid-row: 1; }
.widget-b { grid-column: 2 / 4; grid-row: 1; }
.widget-c { grid-column: 1 / 4; grid-row: 2; }

Комбинирование Flexbox и Grid

Часто оптимальное решение — комбинация: Grid для общей структуры, Flexbox для внутренних компонентов.

.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: 100vh;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.main {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  align-content: start;
}

Инструменты для экспериментов

Для быстрого прототипирования Flexbox используйте Flexbox Playground. Для Grid — CSS Grid Generator на rechecker.ru. Оба инструмента позволяют визуально настраивать свойства и сразу видеть результат.

При миграции существующих стилей в Tailwind пригодится CSS в Tailwind.

Производительность

Оба модуля обрабатываются браузерами эффективно. Grid может быть чуть дороже при очень больших сетках (сотни ячеек), но в типичных сценариях разница незаметна. Выбор должен основываться на семантике раскладки, а не на микрооптимизациях.

Поддержка браузеров

Flexbox поддерживается шире, включая IE10+. Grid поддерживается во всех современных браузерах, в IE10-11 не поддерживается. Для проектов с требованием поддержки старых IE используйте Flexbox или fallback-раскладки.

Рекомендации по выбору

1. Задайте вопрос: это ряд/колонка или сетка? Ряд/колонка — Flexbox, сетка — Grid.
2. Нужно ли выравнивание по обеим осям? Если да — Grid упрощает задачу.
3. Количество элементов фиксировано или переменное? Переменное с гибким переносом — часто Flexbox. Фиксированная сетка — Grid.
4. Есть ли асимметрия? Элементы разного размера, spanning — Grid.

Пример: один макет двумя способами

Рассмотрим галерею из 6 карточек. С Flexbox:

.flex-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.flex-gallery .card {
  flex: 1 1 calc(33.333% - 1rem);
  min-width: 200px;
}

Проблема: при 4 элементах в последней строке два останутся, и они растянутся на 50% каждый. Сетка визуально «прыгает».

С Grid:

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

Каждый элемент занимает ровно одну ячейку. Размер ячеек одинаковый. Поведение предсказуемо.

Пример: навигация

Для навигации Flexbox логичнее — это одномерный ряд с выравниванием:

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

Grid здесь избыточен: нужна только одна ось, выравнивание по поперечной оси (вертикальное центрирование) Flexbox делает проще.

Миграция с Flexbox на Grid

Если Flexbox-раскладка перестала справляться (например, нужны выровненные колонки при разном количестве элементов), миграция обычно прямолинейна:

/* Было */
.flex {
  display: flex;
  flex-wrap: wrap;
}
.flex > * { flex: 1 1 300px; }

/* Стало */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

Обратная миграция (Grid → Flexbox) сложнее, если использовались grid-area, grid-column/grid-row и асимметричные раскладки.

Дополнительные материалы

Подробное руководство по Flexbox — в статье CSS Flexbox: полное руководство с примерами. Полный разбор CSS Grid — в CSS Grid: полное руководство по сеткам.

---

Вложенные раскладки

Flexbox часто используется внутри Grid-ячеек:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.grid > * {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

И наоборот: Grid внутри Flexbox-элемента для выравнивания по сетке.

Производительность

Оба модуля эффективны. При тысячах элементов возможны задержки. Для длинных списков используйте виртуализацию (rendering только видимых элементов).

Обучение

Flexbox проще для начала — меньше свойств, интуитивнее для одномерных задач. Grid имеет более сложную модель, но для сеток даёт больше контроля. Рекомендуется изучать оба.