В чем разница CSS grid и flexbox

Что проверяют

Понимаете ли вы, что одно про одну ось, а другое про две, и умеете ли выбирать по задаче, а не по привычке.

Как отвечать

Flexbox одномерный: раскладывает элементы вдоль одной оси, строки или колонки. Размеры считаются от содержимого: элементы растягиваются и сжимаются по flex-grow, flex-shrink, flex-basis.

Grid двумерный: задаёт строки и колонки одновременно, и элементы размещаются в ячейках. Сетка описывается в контейнере заранее, поэтому раскладка не зависит от содержимого.

Как выбирать:

• flex: панель кнопок, шапка с логотипом и меню, карточка с иконкой и текстом, всё, где элементы идут в ряд и делят свободное место;
• grid: макет страницы целиком, галерея карточек, форма с выравниванием подписей и полей по колонкам, любые случаи, где важно совпадение по обеим осям.

Практические возможности, которые стоит назвать: grid-template-areas для читаемого макета словами, repeat(auto-fill, minmax(240px, 1fr)) для адаптивной сетки без медиазапросов вовсе, gap (он есть и во flex), выравнивание через justify-* и align-* в обоих.

Важно сказать, что они не конкуренты: типичная страница это grid для общей раскладки и flex внутри отдельных блоков.

Где спотыкаются

Пытаются собрать двумерный макет на flex через вложенные обёртки и проценты.

Не знают про minmax и auto-fill и пишут медиазапросы там, где они не нужны.

Считают, что gap работает только в grid.

Ставят фиксированные высоты вместо выравнивания и получают разъезжающиеся карточки.