Вопрос «что использовать — Grid или Flexbox?» чем-то напоминает старые споры «верстать таблицами или дивами». Правильный ответ скучный: смотря что верстаем.
Flexbox и Grid — не конкуренты. Это два разных инструмента. Примерно как отвёртка и шуруповёрт. И тем и другим можно закрутить, но если пытаться собрать шкаф одной отвёрткой, через некоторое время начнёшь ненавидеть мебельную промышленность.
Коротко: Flexbox — линия, Grid — сетка. Если нужно расположить элементы в одну строку или один столбец — Flexbox. Если управлять строками и колонками одновременно — Grid. Можно конечно сделать всё на Flexbox. Можно и суп есть вилкой. Иногда получается, но зачем?
Где Flexbox удобнее
Flexbox хорошо заходит там, где элементы выстраиваются в одном направлении и гибко делят место между собой:
— горизонтальное меню;
— панель кнопок;
— выравнивание иконки и текста;
— карточки в строку;
— центровка блока;
— распределение элементов по краям контейнера.
.menu {
display: flex;
gap: 24px;
align-items: center;
justify-content: space-between;
}
Просто, понятно. Не надо тащить Grid если задача — логотип слева, меню по центру, кнопка справа.
Где Grid удобнее
Grid радует когда нужно описать именно сетку — не имитировать её вложенными flex-контейнерами, а сказать браузеру: вот три колонки, вот расстояния, вот как перестраиваем на мобильном.
.catalog {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
}
@media (max-width: 768px) {
.catalog {
grid-template-columns: 1fr;
}
}
Для каталога, списка статей, плитки преимуществ, структуры страницы Grid выглядит естественнее. Особенно если макет непрямолинейный и надо управлять и горизонталью и вертикалью.
Типичные ошибки
Самая распространённая — выбрать один инструмент и доказывать что он решает всё. Мир обычно не спорит а просто ломается на планшете.
— Всё на Flexbox. Вложенные контейнеры, отрицательные отступы и грусть.
— Всё на Grid. Там где нужна простая строка с выравниванием — избыточная схема.
— Лишние обёртки. Иногда хватает одного контейнера, но рука тянется завернуть div в div и ещё раз в div для надёжности.
— Забытый мобильный. На широком экране прекрасно, на телефоне карточки превращаются в змейку.
— Жёсткие размеры. Контент живой. Заголовки бывают длинными, картинки разными, пользователь может увеличить шрифт.
Можно ли использовать вместе
Не только можно — часто именно так и надо. Grid описывает общую сетку, Flexbox раскладывает элементы внутри карточки.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
}
.card {
display: flex;
flex-direction: column;
}
.card__button {
margin-top: auto;
}
Grid отвечает за раскладку карточек, Flexbox — за внутреннюю жизнь карточки. Кнопка уезжает вниз, высоты аккуратные, верстальщик пьёт чай без нервного тика.
Что касается Bootstrap, Tailwind и прочих сеток — они никуда не делись, могут ускорить работу на типовом проекте. Но CSS они не отменяют. Если не понимать что под капотом, любая готовая сетка превращается в набор классов, похожих на заклинание.
Хорошая верстка — не демонстрация знания всех новых свойств CSS. Это предсказуемый результат в браузере пользователя. Без ощущения что ради трёх колонок на странице был поднят маленький дата-центр.