CSS Flexbox против Grid: когда какой макет использовать

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

Что такое CSS Flexbox?

CSS Flexible Box Layout, обычно называемый Flexbox, это одномерная модель макета. Она превосходно распределяет пространство вдоль одной оси (горизонтальная строка или вертикальный столбец). Flexbox позволяет элементам внутри контейнера гибко растягиваться, увеличиваться, сжиматься и выравниваться в зависимости от доступного пространства.

Flexbox был разработан для решения распространённых задач макета, которые были печально известны своей сложностью в традиционном CSS: вертикальное центрирование элементов, равномерное распределение пространства между соседними элементами и переупорядочивание контента без изменения HTML. До появления Flexbox разработчики полагались на float, трюки с inline-block и табличные макеты для достижения этих эффектов.

Основные концепции Flexbox

• Flex-контейнер: родительский элемент с применённым display: flex.
• Flex-элемент: прямой дочерний элемент flex-контейнера.
• Главная ось: основное направление макета (по умолчанию горизонтальное, управляется flex-direction).
• Поперечная ось: направление, перпендикулярное главной оси.
• Flex-grow/shrink/basis: свойства, управляющие тем, как элементы расширяются и сжимаются для заполнения доступного пространства.

Пример Flexbox: панель навигации

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
}

.navbar__logo {
  flex-shrink: 0;
}

.navbar__links {
  display: flex;
  gap: 16px;
  list-style: none;
}

Эта панель навигации использует Flexbox с justify-content: space-between, чтобы разместить логотип слева, а ссылки справа. Элементы вертикально центрируются с помощью align-items: center. Это классический одномерный макет, для которого Flexbox является естественным выбором.

Что такое CSS Grid?

CSS Grid Layout — это двумерная система макета. Она одновременно обрабатывает строки и столбцы, давая вам точный контроль над положением и размером элементов в сеточной структуре. Grid позволяет определять явные дорожки, области и правила размещения, создавая сложные макеты с минимальным кодом.

Grid разработан для макетов уровня страницы и сложных структур компонентов, где вам нужен контроль в обоих измерениях. Он вводит такие концепции, как именованные области сетки, auto-fill и auto-fit, а также явные размеры строк и столбцов, делая ранее невозможные макеты простыми и понятными.

Основные концепции Grid

• Grid-контейнер: родительский элемент с применённым display: grid.
• Grid-элемент: прямой дочерний элемент grid-контейнера.
• Grid-дорожки: строки и столбцы, определённые grid-template-rows и grid-template-columns.
• Grid-линии: невидимые линии, образующие границы дорожек, используемые для размещения.
• Grid-области: именованные области сетки, которым могут быть назначены элементы.
• Gap: расстояние между дорожками сетки (строками и столбцами).

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

.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 64px 1fr 48px;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  min-height: 100vh;
}

.page__header  { grid-area: header; }
.page__sidebar { grid-area: sidebar; }
.page__content { grid-area: content; }
.page__footer  { grid-area: footer; }

Этот макет страницы использует именованные области сетки для создания классического макета с боковой панелью. Заголовок и подвал охватывают обе колонки, а боковая панель и контент расположены рядом. Эта двумерная структура — именно то, в чём Grid действительно превосходит.

Flexbox против Grid: параллельное сравнение

Когда использовать Flexbox

Когда ваша задача макета преимущественно одномерна, Flexbox — правильный выбор. Вот наиболее распространённые сценарии:

1. Навигационные панели и меню

Навигация по сути представляет собой строку (или столбец) элементов. Flexbox распределяет пространство между элементами, изящно обрабатывает переполнение и упрощает вертикальное выравнивание. Свойство gap заменяет старые подходы к отступам между элементами меню на основе margin.

2. Центрирование контента

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Это трёхстрочное решение центрирования — один из самых любимых шаблонов Flexbox. До Flexbox вертикальное центрирование требовало хаков с table-cell, абсолютным позиционированием с transform или трюков с line-height. Flexbox делает это без усилий.

3. Выравнивание содержимого карточек

Когда карточка имеет заголовок, описание и кнопку действия, и вы хотите, чтобы кнопка всегда была прикреплена к низу независимо от длины контента, Flexbox обрабатывает это элегантно:

.card {
  display: flex;
  flex-direction: column;
}

.card__content {
  flex: 1;
}

flex: 1 на области контента заставляет её расти, заполняя доступное пространство и прижимая кнопку к низу карточки. Это работает независимо от того, сколько текста содержит карточка.

4. Макет строки формы

Элементы формы, которые должны располагаться в строке и быть изменяемого размера, такие как поле поиска и кнопка отправки, идеально подходят для Flexbox. Поле ввода может расти, заполняя доступное пространство, в то время как кнопка сохраняет свой естественный размер.

5. Медиа-объекты

Классический шаблон медиа-объекта (изображение слева, текст справа) — естественное совпадение для Flexbox. Изображение сохраняет свою естественную ширину, а текст заполняет оставшееся пространство.

Когда использовать CSS Grid

Когда ваш макет требует одновременного контроля над строками и столбцами или точного размещения элементов в определённой структуре, Grid — правильный выбор.

1. Полностраничный макет

Макет уровня страницы с заголовком, боковой панелью, областью контента и подвалом — это типичный случай использования Grid. Именованные области сетки делают макет читаемым и поддерживаемым:

.layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "content"
    "sidebar"
    "footer";
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 1fr 300px;
    grid-template-areas:
      "header  header"
      "content sidebar"
      "footer  footer";
  }
}

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

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

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

Это одно объявление создаёт адаптивную сетку карточек, которая автоматически регулирует количество столбцов в зависимости от доступной ширины. Каждая карточка имеет минимальную ширину 280px, но растёт, заполняя оставшееся пространство. Медиа-запросы не требуются. Этот шаблон auto-fill с minmax — одна из самых мощных техник Grid.

3. Макет панели управления

Панели управления с виджетами разного размера, охватывающими несколько строк и столбцов, идеально подходят для Grid. Вы можете размещать элементы в определённых позициях сетки и охватывать дорожки:

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 16px;
}

.widget--wide { grid-column: span 2; }
.widget--tall { grid-row: span 2; }
.widget--hero { grid-column: span 2; grid-row: span 2; }

4. Журнальные и редакционные макеты

Когда контенту нужно перекрываться или размещаться в непоследовательных позициях, Grid — единственная система макета CSS, которая поддерживает это нативно. Вы можете размещать элементы на определённых линиях сетки, создавая перекрывающиеся композиции без абсолютного позиционирования.

5. Макет «Святой Грааль»

Знаменитый макет «Святой Грааль» (заголовок, три колонки с фиксированными боковыми панелями и гибким центром, подвал) реализуется с помощью Grid тривиально:

.holy-grail {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

Сочетание Flexbox и Grid

Наиболее эффективный подход — не выбирать между Flexbox и Grid, а стратегически их сочетать. Распространённый и рекомендуемый шаблон — использовать Grid для макромакета (структура страницы), а Flexbox для микромакета (внутри компонентов).

Пример: панель управления с Grid и Flexbox

/* Grid for the page structure */
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 64px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  min-height: 100vh;
}

/* Flexbox for the header content */
.dashboard__header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

/* Flexbox for sidebar menu items */
.dashboard__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

В этом примере Grid определяет общую структуру страницы, а Flexbox обрабатывает выравнивание внутри каждой секции. Такое разделение задач делает ваш CSS организованным и целенаправленным.

Шаблоны адаптивного дизайна

Адаптивный шаблон Flexbox: перенос

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

.tag {
  flex-shrink: 0;
}

Flexbox-перенос отлично подходит для списков тегов, наборов чипсов и любых коллекций элементов, которые естественно переходят на следующую строку, когда горизонтальное пространство заканчивается. Каждый элемент сохраняет свой естественный размер.

Адаптивный шаблон Grid: auto-fill

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

Grid auto-fill создаёт по-настоящему адаптивные сетки без каких-либо медиа-запросов. Количество столбцов автоматически регулируется в зависимости от ширины контейнера, при этом каждый столбец имеет минимальную ширину 300px. Это мощнее, чем Flexbox-перенос, поскольку элементы растягиваются, равномерно заполняя строку.

Адаптивный шаблон Grid: наложение

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .layout {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

Распространённые ошибки и как их избежать

• Использование Grid для однострочных макетов: если вам нужны элементы только в одной строке или столбце, Flexbox проще и уместнее. Использование display: grid с одной строкой grid-template-columns обычно является избыточным.
• Использование Flexbox для двумерных макетов: попытка создать сеточный макет с вложенными flex-контейнерами приводит к хрупкому, трудно поддерживаемому коду. Для любого макета, требующего одновременного контроля строк и столбцов, используйте Grid.
• Забывание gap: и Flexbox, и Grid поддерживают свойство gap. Используйте его вместо margin для отступов между элементами. Оно применяется только между элементами, не по краям, что обычно именно то, что нужно.
• Переопределение flex-basis с помощью width: в flex-контейнере flex-basis имеет приоритет над width на главной оси. Установка обоих может привести к неожиданному поведению. Используйте сокращение flex, чтобы избежать путаницы.
• Неиспользование minmax: при определении столбцов сетки всегда рассмотрите использование minmax() для предотвращения того, чтобы столбцы становились слишком маленькими или слишком большими. Столбец, определённый как 1fr, может сжаться до нуля; minmax(200px, 1fr) гарантирует минимальную ширину.
• Игнорирование неявной сетки: когда у вас больше элементов, чем определённых дорожек сетки, Grid создаёт неявные дорожки. Используйте grid-auto-rows и grid-auto-columns для управления размером этих неявных дорожек.

Поддержка браузерами

Flexbox и Grid оба пользуются отличной поддержкой браузерами в 2026 году:

Обе технологии полностью поддерживаются во всех основных браузерах уже много лет. Нет причин избегать ни одной из них из-за проблем совместимости в современной веб-разработке. Свойство gap в Flexbox было последней крупной функцией, получившей универсальную поддержку, и оно доступно во всех браузерах с 2021 года.

Краткое руководство по принятию решений

Когда вы начинаете новый макет, задайте себе эти вопросы:

• Нужен ли мне одновременный контроль над строками и столбцами? Да — Grid. Нет — Flexbox.
• Должен ли контент определять размер макета или макет должен определять положение контента? Контент-ориентированный — Flexbox. Макет-ориентированный — Grid.
• Нужен ли элементам естественный перенос? Да — Flexbox с flex-wrap или Grid с auto-fill.
• Нужно ли перекрытие элементов? Да — Grid.
• Это компонент внутри большего макета? Компонент, вероятно, Flexbox, больший макет — Grid.