Flexbox или Grid
Вопрос
Чем отличаются Flexbox и Grid? Как ты выбираешь, что использовать?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Flex одномерный: раскладка вдоль одной оси
Grid двумерный: строки и колонки одновременно
Во flex размеры чаще идут от содержимого, в Grid их задаёт контейнер
Flex: шапка, панель кнопок, «иконка + текст»
Grid: макет страницы, ровная сетка карточек
Их часто совмещают: Grid для макета, Flex внутри ячеек
Что могут спросить следом
- Почему последняя строка карточек во flex с wrap выглядит иначе?
- Как сделать адаптивную сетку карточек без медиазапросов?
- Что такое subgrid?
Разбор
Главное отличие в размерности. Flexbox раскладывает элементы вдоль одной оси, и размеры обычно идут от содержимого: элементы растут и сжимаются по своим коэффициентам. Поэтому он хорош для шапки, панели кнопок, строки «иконка и текст», центрирования. Grid работает сразу с двумя осями: контейнер задаёт строки и колонки, а элементы встают в ячейки. Он подходит для макета страницы и ровных сеток карточек. Хороший пример: сетка карточек на flex с переносом даёт неровную последнюю строку, потому что каждая строка раскладывается независимо, а grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) даёт ровные колонки без медиазапросов. На практике их совмещают: Grid для каркаса, Flex внутри карточек.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.