Flexbox или Grid — что выбрать (и признак, что ты выбрал не то)

Есть простой признак, что ты выбрал не ту раскладку. Он прямо описан в документации MDN, и звучит так:

Если ты используешь flexbox и ловишь себя на том, что отключаешь гибкость — скорее всего, тебе нужен grid.

Задаёшь flex-элементу жёсткую ширину, чтобы он совпал с рядом выше? Пишешь flex: 0 0 240px третий раз подряд? Это оно. Ты руками строишь сетку внутри инструмента, который сетки не умеет.

Разберём, где проходит настоящая граница — она не там, где обычно рассказывают.

Одно измерение против двух

Базовая разница простая. Flexbox проектировали для раскладки в одном измерении: либо ряд, либо столбец. Grid — для двух сразу: строки и колонки одновременно.

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

В grid ты сначала объявляешь дорожки (grid-template-columns: 1fr 1fr 1fr), и элементы раскладываются по ним. Колонки совпадают всегда, потому что они существуют до элементов.

Главный вопрос для выбора формулируется в одну строку: нужно ли мне управлять и строкой, и колонкой одновременно? Если да — grid.

Содержимое наружу против макета внутрь

А вот это различие полезнее первого, хотя встречается реже.

Flexbox работает от содержимого наружу. Ты кладёшь набор элементов и позволяешь их собственным размерам решать, кто сколько займёт. Идеальный случай — панель кнопок разной длины: пусть каждая будет по своему тексту, а свободное место распределится между ними.

Grid работает от макета внутрь. Ты сначала рисуешь структуру, потом кладёшь в неё элементы — и они подчиняются дорожкам, а не наоборот.

Отсюда практическое правило: если размеры должны диктоваться содержимым — flex; если содержимое должно подчиниться сетке — grid.

Критерии по пунктам

• Измерения. Flex — ряд или столбец. Grid — ряды и колонки сразу.
• Кто решает размер. Flex — содержимое элементов. Grid — объявленные дорожки.
• Выравнивание колонок между рядами. Flex — не гарантируется. Grid — всегда.
• Порядок в разметке. Flex — визуально можно менять только order. Grid — можно класть элемент в конкретную ячейку, независимо от порядка в HTML.
• Отступы. gap работает в обоих. Старый совет «в flexbox gap нет, используй margin» устарел: во Firefox с 2018-го, в Chrome с версии 84, в Safari с 14.1 — то есть повсеместно с 2020–2021 годов.
• Выравнивание по осям. Одинаковое. align-items, justify-content, place-items — это общий модуль Box Alignment, а не фича одной раскладки.
• Вложенность строк в ячейках. Только у grid есть subgrid — дочерняя сетка наследует дорожки родителя (Chrome 117, Firefox 71, Safari 16). Незаменимо, когда карточки в ряду должны иметь общую линию заголовков и кнопок.
• Порог входа. Flex — три свойства и ты в деле. Grid — надо разобраться с дорожками, fr и minmax(), это полчаса.

Кому что подойдёт

Без виляний.

Бери flex, если это: панель навигации, ряд кнопок, элемент списка (иконка + текст + кнопка справа), теги, футер из трёх блоков, любая полоска, где элементы выстроились в линию и делят место.

Бери grid, если это: каркас страницы, галерея карточек, ценовые планы в ряд, форма в две колонки, дашборд, календарь — всё, где важно, чтобы колонки совпадали.

Бери оба, потому что это норма, а не компромисс: grid раскладывает страницу и галерею, flex — внутренности каждой карточки. Один проект спокойно использует обе раскладки на одном экране.

Отдельно про типичную ошибку с автосеткой. Вот строка, которая делает адаптивную галерею вообще без медиазапросов:

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

Колонки сами появляются и исчезают по мере доступной ширины. minmax(220px, 1fr) здесь ещё и страхует от горизонтальной прокрутки: без нижней границы 1fr дорожки упираются в содержимое и отказываются сжиматься.

Коротко: линия — flex, сетка — grid, а «отключаю гибкость» — сигнал, что ты в неправильном инструменте.

Устарел ли flexbox после появления grid?

Нет, они не конкуренты, а разные задачи. Grid не отменяет flexbox так же, как таблица не отменяет список. В живых проектах flex встречается чаще — потому что мелких линейных блоков в интерфейсе больше, чем каркасов.

Можно ли использовать их вместе?

Не только можно — это стандартная практика. Элемент grid спокойно становится flex-контейнером для своих детей. Например, карточка лежит в ячейке сетки, а внутри неё flex прижимает кнопку к низу.

Что выбрать, если верстаешь на Tailwind?

Ровно то же самое — flex и grid там просто классы поверх тех же свойств CSS. Разница в скорости записи, а не в выборе раскладки; про сам подход есть разбор в Tailwind или обычный CSS.