Flexbox или Grid: когда что выбрать

Главный вопрос лейаута: «это ряд или таблица?». Один ряд или колонка — Flexbox. Ряды И колонки одновременно — Grid.

«Используй правильный инструмент: Flexbox для содержимого, Grid для лейаута».

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

Шпаргалка выбора

  FLEXBOX — одна ось        GRID — две оси
  =================        ===============
  [A][B][C][D]  -> ряд     +----+----+----+
                          | A  | B  | C  |
  или столбец:            +----+----+----+
  [A]                     | D  | E  | F  |
  [B]                     +----+----+----+
  [C]                     строки И колонки

Навигация — классический Flexbox: логотип слева, меню справа, всё в один ряд.

/* Навбар: один ряд, прижать края */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Галерея: сетка с авто-переносом */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

Связка auto-fill + minmax в Grid — рабочая лошадка адаптивных галерей: карточки сами переносятся и тянутся без единого медиазапроса.

Разбор глубже: измерения как критерий выбора

Путаница «Flexbox или Grid» уходит, как только перестаёшь думать о них как о конкурентах и начинаешь думать об измерениях задачи. Спросите себя: я раскладываю элементы вдоль одной линии или заполняю двумерное поле? Кнопки в тулбаре, пункты меню, иконка с подписью, теги через запятую — это всё одна ось, работа для Flexbox. Галерея товаров, дашборд с виджетами, лейаут «шапка-сайдбар-контент-футер» — это строки и колонки сразу, работа для Grid. Один этот вопрос снимает 90% сомнений.

У инструментов разная философия распределения. Flexbox отталкивается от контента: элементы занимают столько, сколько им нужно, а свойства вроде justify-content распределяют между ними свободное место. Поэтому Flexbox идеален, когда размеры элементов заранее неизвестны (меню с пунктами разной длины). Grid отталкивается от структуры: вы сначала задаёте сетку треков, а потом расставляете в неё контент. Поэтому Grid идеален, когда важно строгое выравнивание независимо от содержимого. Понимание этой разницы важнее, чем заучивание свойств.

На практике зрелый верстальщик использует оба инструмента в одном макете, вкладывая их друг в друга. Внешний лейаут страницы — Grid (двумерная структура). Внутри grid-ячейки «карточка» — Flexbox в колонку, чтобы прижать кнопку к низу независимо от длины описания. Внутри кнопки — снова Flexbox, чтобы выровнять иконку и текст по центру. Это не противоречие, а правильное разделение труда: каждый инструмент решает ту подзадачу, для которой создан. Связка auto-fill + minmax в Grid вообще снимает нужду в медиазапросах для галерей — карточки сами решают, сколько их влезает в ряд.

Ещё один практический ориентир — выравнивание и центрирование, бывшая головная боль CSS. И Flexbox, и Grid решают её тривиально: пара свойств выравнивания по обеим осям центрирует содержимое и по горизонтали, и по вертикали, без старых хаков с отрицательными отступами и трансформациями. Это настолько упростило раскладку, что сегодня абсолютное позиционирование и флоаты для лейаута считаются устаревшими — их вытеснили flex и grid почти везде. Понимание этого экономит массу времени: вместо борьбы с «не центрируется» вы выбираете нужный инструмент по измерению задачи и получаете предсказуемый, поддерживаемый результат с минимумом кода.

Как делают ПЛОХО

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

Как делают ХОРОШО

Выбирают по измерениям: одна ось — Flexbox, две — Grid. Галереи делают на Grid с auto-fill, чтобы перенос был автоматическим. Вложенность минимальна, код читается.

Чек-лист

• Одна ось (ряд/столбец) — выбран Flexbox.
• Строки и колонки сразу — выбран Grid.
• Адаптивная галерея — Grid + auto-fill/minmax.
• Нет «матрёшки» из десятка вложенных flex-контейнеров.

Итог. Flexbox — для одной оси, Grid — для двух. Правильный выбор убирает вложенность и делает лейаут устойчивым и читаемым.