Перевод статьи Don’t Overthink It (Flexbox) Grids с сайта css-tricks.com, опубликовано на css-live.ru, автор — Крис Койер.

Четыре года назад вышла моя статья «Относитесь к сеткам проще», собравшая немало откликов. Уже тогда мне казалось, что мы находимся на пике популярности сеток. Каждую неделю кто-нибудь рекламировал очередной фреймворк для сеток.

Посыл статьи был такой: «Не бойтесь! Сетки можно создавать и самому! В сложном фреймворке нет необходимости». Возможно, это было не так уж радужно, но вот такой уж тезис я выкатил. Вы задаете float и ширину в процентах паре элементов и баста.

Если хотите перейти к раскладке на флексбоксах сегодня, делать самодельные сетки ещё проще.

Обычно я делаю так:

<div class="flex-grid">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

.flex-grid {
  display: flex;
}
.col {
  flex: 1;
}

Таких колонок может быть сколько угодно и они все автоматически становятся равной ширины и гибкими!

Хотите, чтобы на маленьких экранах они встали в одну колонку? Легко:

@media (max-width: 400px) {
  .flex-grid {
    display: block;
  }
}

Нужны промежутки между колонками? Добавьте внешние или внутренние отступы к колонкам. Мне лично нравится выравнивание по ширине для создания колонок, например:

.flex-grid-thirds {
  display: flex;
  justify-content: space-between;
}
.flex-grid-thirds .col {
  width: 32%;
}

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

See the Pen Easy Flexbox Grid by Chris Coyier (@chriscoyier) on CodePen.

Повторюсь: незачем хвататься за грид-фреймворк, чтобы построить сетку. Делайте их сами! Но это и не означает, что флексбокс крайне прост и что он решает все проблемы. Есть множество пограничных случаев и странностей с поддержкой браузерами, с которыми можно столкнуться, если дело касается более специфических возможностей флексбокса. Но в этой статье ничего сложного нет, и я бы удивился, если бы у вас возникли проблемы.

Что ещё

Филипп Уолтон написал про великолепие систем сеток на флексбоксе ещё больше.

Справедливости ради, сеточные фреймворки зачастую надёжны и у многих команд есть много удачных предопределённых классов и рецептов для построения каких угодно сеток. Если вас интересует фреймворк для сеток на флексбоксе, вот некоторые из них: Frow, Flexbox Grid, and Gridlex.

P.S. Это тоже может быть интересно:

• Тёмная сторона CSS: выходим за рамки и взрываем звезды с border-image и градиентами
• Псевдокласс :has() — не только «родительский селектор»
• Новогодние подарки Рабочей группы CSS: значения и единицы 4 уровня, медиавыражения 4 и 5 уровней