Школа
Веб-разработка

Где использовать гриды, а где флексбоксы

15 дек 2022
👁 4693   🗩3
Веб-разработка

Где использовать гриды, а где флексбоксы

15 дек 2022
👁 4693   🗩3
Василий Половнёв
Технический директор бюро
Полезно
 13
13
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

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

Веб‑разработка
Полезно
 13
13
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Виктор Тимофеев

А что за «хак» с minmax(0)?

Смысл происходит из названий. Грид — жесткая сетка. Флексбокс — гибкий контейнер.
Что это значит? Помимо очевидного свойства грида иметь ряды и колонки, по умолчанию:

  1. Элемент фиксированного размера выйдет за пределы грид‑контейнера при его сжатии. Флексбокс будет сжиматься до тех пор, пока сжимается содержимое всех потомков, не давая содержимому выйти за пределы. Грид будет сжиматься независимо от содержимого.

  2. Инлайновый флексбокс занимает меньше места, сжимая содержимое и добавляя переносы строк. Инлайновый грид не сжимает, покуда хватает места.

  3. В гриде можно управлять размером рядов и колонок из свойств контейнера, у флексбокса такого нет; отсюда возникает проблема флексбокса, когда невозможно сделать колонки равной ширины без обращения к свойствам потомков флексбокса.

  4. Для управления размерами потомков грида доступны специальные величины: fr, repeat, и т. д.

Вывод примерно такой: для общей разметки используй грид, для небольших блоков (боксов!) флексбокс. Суть и рекомендации по использованию, повторяюсь, заключены в сами названия.

Виктор, хак в том, что просто написать repeat(auto-fit, min-content) нельзя:
https://stackoverflow.com/…‑with‑auto‑fill‑or‑auto‑fit

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

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