И гриды, и флексбоксы, и 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы