Grid или Flexbox: как выбрать
Вопрос
Чем Grid отличается от Flexbox и как ты выбираешь между ними?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Flexbox одномерный: раскладывает элементы вдоль одной оси, перенос строк независим
Grid двумерный: строки и колонки описаны сразу, элементы встают в общие треки
Flexbox удобен, когда размер диктует содержимое (меню, кнопки, тулбар)
Grid удобен, когда каркас задан заранее (страница, галерея, форма в колонки)
Они комбинируются: каркас на Grid, внутренности ячеек на Flexbox
Пример различия: во flex-wrap элементы второй строки не выравниваются по колонкам первой
Что могут спросить следом
- Как сделать сетку карточек без медиазапросов?
- Можно ли выровнять кнопки в карточках разной высоты?
- Что будет с порядком чтения, если расставить элементы по линиям сетки?
Разбор
Flexbox работает в одном измерении: я задаю ось, и элементы выстраиваются вдоль неё, деля место в зависимости от своего содержимого. Если включить перенос, каждая строка живёт своей жизнью, поэтому элементы второй строки не встанут под элементами первой. Grid двумерный: я заранее описываю строки и колонки, а элементы встают в общие треки, поэтому всё выравнивается и по горизонтали, и по вертикали. Выбираю так: если макет идёт от содержимого, например навигация, группа кнопок, строка с иконкой и текстом, беру Flexbox. Если макет идёт от каркаса, например шапка, сайдбар, контент, или галерея карточек, беру Grid. На практике они живут вместе: страница на Grid, внутри карточки Flexbox. Для адаптивной галереи использую repeat(auto-fit, minmax(220px, 1fr)), а для выравнивания содержимого карточек между собой subgrid.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.