В чем разница между Grid и Flex?

Flexbox раскладывает элементы вдоль одной оси (строка или колонка), Grid — по двум осям сразу.

Flexbox

• Работает «от содержимого»: размеры элементов определяют, как распределится место.
• Хорош для компонентов: панели с кнопками, меню, выравнивание внутри карточки.

.toolbar { display: flex; align-items: center; gap: 8px; }
.toolbar__search { flex: 1; }

Grid

• Работает «от сетки»: сначала задаются колонки и строки, потом элементы встают в них.
• Хорош для макетов страниц и сеток, где важно выравнивание и по горизонтали, и по вертикали.

.page { display: grid; grid-template-columns: 240px 1fr; }

Как выбирать

Нужно выстроить элементы в ряд и распределить место — flex. Нужно, чтобы элементы совпадали и по строкам, и по колонкам — grid. Их часто комбинируют: grid для страницы, flex внутри блоков.

Коротко для собеседования

Flex — одномерная раскладка от содержимого, Grid — двумерная от сетки; flex для компонентов, grid для макетов.

Подробнее: MDN — Связь Grid и других методов раскладки