Относитесь к сеткам (на флексбоксах) проще

Перевод статьи 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. Это тоже может быть интересно:

5 Комментарии

  1. Мимо проходил

    Всё фигня. Сделать обтекание произвольного блока снизу (слева или справа) я до сих пор не знаю как, ни с флексбоксом, ни с грид лайаутом.

    1. SelenIT

      К сожалению, да. В ископаемом черновике Template Layout-а (один из первоисточников для гридов) подобное было, но оказалось слишком сложно для реализации. По идее, что-то подобное должно сработать в сочетании Page Floats с мультиколонками, но, насколько я могу судить, технология еще слишком сырая. И в сторону CSS Shapes можно поглядеть.

    2. Андрей Нефедов

      это говорит о вашей некомпетентности… вас бы я не взял на работу по итогам собеседовния.

      1. Мимо проходил

        А я к вам и не устраиваюсь.
        Впрочем, от описания способа решения этой проблемы не откажусь.

      2. SelenIT

        Мне тоже было бы интересно увидеть решение:)

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.