И гриды, и флексбоксы, и gap (межстрочник и межколонник) в них поддерживаются всеми современными браузерами. Больше того, в некоторых случаях гриды и флексбоксы взаимозаменяемы — меняешь display: inline-grid на inline-flex, всё работает. Поэтому я выбираю между флексбоксами и гридами, ориентируясь на задачу и код: какой вариант даст меньше кода, какой проще воспринимать и поддерживать?
По моему опыту, флексбокс больше подходит в случае, когда раскладка определяется содержимым. Скажем, в меню на сайте или тегах, где важно сохранить собственные размеры элементов:
.nav {
/* Включаем флексбокс. По умолчанию элементы
раскладываются в строку */
display: flex;
/* Задаём расстояние между элементами */
gap: 1em;
}.nav {
/* Включаем грид и настраиваем
автоматические колонки
с размером по содержимому (min-content) */
display: grid;
gap: 1em;
grid-template-columns: repeat(auto-fit, minmax(0, min-content));
}repeat и auto-fit, зачем «хак» с minmax(0)С другой стороны, если важно вписать элементы в сетку из N колонок, лучше взять гриды. Код будет лаконичнее и понятнее:
.curriculum {
/* Создаём четыре колонки,
равномерно делящие всё
доступное пространство */
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: .5em;
}.curriculum {
/* Задаём параметры сетки.
Эти переменные мы будем использовать ниже,
чтобы рассчитать базовую ширину колонок */
--columns: 4;
--gap: .5em;
display: flex;
/* Разрешаем перенос на следующую строку */
flex-wrap: wrap;
gap: var(--gap);
}
.curriculum > * {
flex: 1 1 calc(100% / var(--columns));
max-width: calc((100% / var(--columns)) - var(--gap));
}Приглашаю уважаемых советчиков поделиться своими правилами и ориентирами в выборе между гридами и флексбоксами.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.