Flexbox и Grid: заменяют ли они друг друга

Заменяют ли Flexbox и Grid друг друга?

Grid полностью заменил Flexbox, потому что Grid умеет всё то же самое и всегда проще

Flexbox полностью заменил Grid, потому что перенос строк flex-wrap делает Flexbox полноценной сеткой

Flexbox и Grid не заменяют друг друга: Flexbox лучше для 1D-раскладки, Grid — для 2D-сеток, часто применяются вместе

Flexbox и Grid являются устаревшими, в 2026 году их следует заменять только на position: absolute и float

Теория: ключевая идея

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

Правило «Flexbox для 1D, Grid для 2D» полезно как стартовая подсказка, но оно не является строгим законом: иногда Grid применяется для «почти одномерных» задач, а Flexbox — для «похожих на сетку» списков, если не требуется строгое совпадение колонок между строками.

Как мыслит Flexbox: оси и линии

Во Flexbox есть главная ось (main axis) и поперечная ось (cross axis), которые зависят от flex-direction.
Элементы распределяются по главной оси, а по поперечной выполняется выравнивание через align-items и align-content.
Если включён перенос flex-wrap: wrap, элементы разбиваются на несколько линий (flex lines), и каждая линия рассчитывается как отдельная мини-раскладка.

Схема (упрощённо):

flex-direction: row

main axis  ->  ->  ->  (раскладка)
cross axis |
           v (выравнивание)

Пример типичного выравнивания внутри компонента:

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

.item {
flex: 0 1 auto;
}

Почему `flex-wrap` не равен Grid

flex-wrap действительно создаёт несколько строк, но эти строки независимы: ширины и распределение свободного места считаются отдельно для каждой строки.
Из-за независимости строк колонки «не обязаны» совпадать по вертикали, даже если визуально ожидается строгая сетка.
Это нормально для «резиновых» списков, но неудобно для макетов, где требуется строгая геометрия.

Пример «почти сетки» на Flexbox (подходит не всегда):

.cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
}

.card {
flex: 1 1 240px;
min-width: 200px;
}

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

Теория: как мыслит Grid

Grid начинается с задания сетки: определяются колонки и строки (треку задаётся размер), после чего элементы размещаются по линиям или областям.
Так как сетка едина для всего контейнера, элементы разных строк могут строго выравниваться по одним и тем же колонкам.
Grid удобен для «каркаса» страницы и для карточных сеток, где ожидается предсказуемая структура.

Пример каркаса страницы на Grid:

.layout {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr auto;
gap: 16px;
min-height: 100vh;
}

.header { grid-column: 1 / -1; }
.sidebar { grid-column: 1; }
.main { grid-column: 2; }
.footer { grid-column: 1 / -1; }

Схема (упрощённо):

grid

columns: |  1  |     2     |
rows:    +-----+-----------+
         |     |           |
         +-----+-----------+
         |     |           |
         +-----+-----------+

Subgrid: согласование линий во вложенности

В современных реализациях Grid существует возможность subgrid, позволяющая дочернему grid-контейнеру использовать линии родительской сетки по выбранной оси.
Это полезно, когда у карточек или модулей внутри общего макета должны совпадать колонки/строки с внешним «каркасом», без ручного повторения размеров треков.
Если subgrid недоступен в целевой среде, обычно приходится дублировать grid-template-columns или перестраивать структуру разметки.

Практика: когда что выбирать

Ниже приведён упрощённый ориентир выбора, основанный на том, требуется ли единая двумерная сетка или достаточно одномерного распределения.
В реальной разработке часто получается связка: Grid для крупной структуры, Flexbox для внутреннего выравнивания элементов внутри каждого блока.

Ситуация	Чаще подходит	Критерий выбора
Выравнивание элементов в строке/колонке (кнопки, меню, аватары + текст)	Flexbox	Основная логика вдоль одной оси, важны `justify-content` и `align-items`.
Каркас страницы (шапка/сайдбар/контент/подвал)	Grid	Нужны и строки, и колонки как единый «скелет».
Сетка карточек с ровными колонками	Grid	Требуется, чтобы элементы в разных строках выравнивались по одним колонкам.
«Резиновый» список, где точные колонки не критичны	Flexbox	Перенос возможен, допускается, что строки ведут себя независимо.
Вложенные блоки должны совпасть по линиям	Grid (+ `subgrid`)	Нужно наследование/согласование линий сетки.

Пример комбинирования (Grid как каркас, Flexbox внутри компонентов):

.page {
display: grid;
grid-template-columns: 280px 1fr;
grid-template-rows: auto 1fr;
gap: 20px;
}

.topbar {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
}

.actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}

.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}

Итого: Flexbox и Grid не заменяют друг друга, потому что Flexbox ориентирован на распределение и выравнивание в основном вдоль одной оси (удобно для компонентов), а Grid задаёт единую двумерную сетку строк и колонок (удобно для каркасов и строгих сеток); на практике оба подхода часто применяются вместе.