Flexbox и CSS Grid: разрушение мифов

2342
views

Потребовалось больше шести лет на то, чтобы CSS Grid был реализован во всех браузерах. На протяжении всей истории спецификации, она была переполнена противоречиями. В 2011 году анонсированная поддержка CSS Grid в IE10 была встречена скептически. Так как отсутствие информации о стандарте на W3C вызывало у разработчиков вопрос о необходимости еще одной системы разметки страницы, ведь на тот момент существовали float, table и некоторые свойства Flexbox.

Тем не менее, благодаря усилиям разработчиков и членов рабочей группы CSS, таких как Рэйчел Эндрю и Джен Симмонс, популярность Grids начала расти, а вместе с этим и заглавные и ночные реализации.

К марту 2017 года Grids был реализован в каждом крупном браузере, но по-прежнему существует несколько мифов и слухов о спецификации. Цель статьи — разрушить эти мифы и помочь развивать наши сайты с помощью новых техник.


Мифы о том, что «Grids — убийца Flexbox», или например «Flexbox теперь как фолбэк для Grids», только вредят развитию технологий. Я надеюсь, мы сможем избавиться от таких стереотипов.

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

Разрушение мифов

Из серии «Grids vs. Flexbox», два мифа упоминавшихся ранее, самые основные, о которых стоит говорить.

  1. Grids — убийца Flexbox
    Нет. Только один один умрет сегодня, и это будешь ты, Питер Петтигрю табличная верстка.
    Люди склонны устраивать сравнения технологий в стиле versus, и хотя сравнения и конкуренция обычно полезны для развития отрасли, данный случай к ним не относится. Flexbox и Grids были разработаны одновременны, но с разными целями, которые будут проанализированы далее. И если после прочтения, у вас останутся еще сомнения, то обратите внимание на то, что спецификации для Grids и Flexbox разрабатывают одни и те же компании, а значит их создают, чтобы они работали вместе, а не конкурировали друг с другом.
  2. Flexbox как фолбэк для Grids
    Не отвлекайся на квоффл, если видишь снитч.
    И снова же, цель Flexbox отличается от цели Grids. Поэтому мы не должны считать, что одно — строго должно использоваться как фолбэк второго, особенно после того, как IE стал поддерживать обе технологии не так уж плохо.

Работа с разметкой

Давайте прежде всего начнем с того, в каких случаях что использовать и как технологии могут дополнять друг друга:

  • Одномерные макеты
    Если вам нужно разместить свой контент в одном измерении, независимо от того, горизонтальный он (по оси — Х) или вертикальный (по оси — У), и вы хотите, чтобы контейнер был отзывчив к содержимому, тогда нужно смотреть в сторону Flexbox. Это будет правильным решением.
  • Двухмерные макеты
    Если вам необходимо отобразить контент как по оси — Х, так и по оси — У, это значит, что у вас… Сетка! (Grid). Это свойство идеально подходит для макетов страниц и сложных нелинейных компонентов.

Конечно, есть исключения для каждого правила, но вам будет значительно комфортней использовать Grids для основных и визуально сложных макетов, а Flexbox для одной строки элементов (или более, если применить разрыв строк flex-wrap).

В 2017 году разработчики больше знакомы с Flexbox, чем с Grids, поэтому если вы еще не видели Grids в действии, то вам стоит посетить сайт Full Stack Fest Barcelona. Они проделали потрясающую работу с Grids.

flexbox-grids-full stack fest-barcelona

Несмотря на то, что у технологий различные цели, они разделяют несколько внутренних свойств, потому что в конце концов, это инструменты для разметки шаблонов. Общие свойства являются частью немного новой спецификации выравнивания, которую разработчики так долго ждали. Вертикальное выравнивание блока, всегда было одним из 12 подвигов Геракла. Хорошие были времена.

Спецификация выравнивания элементов

Новая спецификация включает методы распределения контента и выравнивания, которые могут применяться к блокам как в Flexbox, так и в Grids.

Выравнивание элементов внутри Flex контейнера.

flexbox-align-css

Распределение элементов внутри Flex контейнера.

flex-distribute-container-css

Выравнивание элементов внутри Grid контейнера.

grid-container-align-css

Давайте остановимся и рассмотрим предыдущее демо.

Прежде всего, мы создаем сетку с тремя столбцами, используя нотацию repeat(), каждый столбец шириной 1fr. Затем мы используем свойства align-items и justify-items для вертикального и горизонтального выравнивания. И align-self и justify-self, чтобы выровнять одиночную ячейку и растянуть её до полной доступной высоты.

Эти свойства знакомы нам с Flexbox. Основное различие заключается в том, что мы не вводим flex-start или flex-end, а только start или end соответственно.

Распределение элементов внутри Grid контейнера.

grid-distribute-container-css

Существует еще один набор свойств, которые Flexbox и Grids будут использовать в ближайшем будущем: grid-gap. Эту фичу активно просили разработчики, она позволит указывать расстояние между элементами сетки. Свойства grid-row-gap и grid-column-gap будут переименованы в row-gap и column-gap соответственно. Но не беспокойтесь, ваш текущий код будут и дальше поддерживаться.

Объединим Flexbox и Grids вместе

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

flexbox-grids-together

Не забудем про отзывчивый дизайн

В отличии от float и других устаревших систем разметки, Flexbox и Grids были созданы в эпоху мобильных устройств. Поэтому они были разработаны изначально с учетом отзывчивости и гибкости, которых не хватает другим методам. Вы обнаружите, что есть несколько способов построить отзывчивый интерфейс используя любую из техник.

Отзывчивость в Flexbox

Flexbox изначально отзывчивый. Как только вы применяете к элементу свойство display: flex, у вас уже есть отзывчивая разметка. В зависимости от того, сколько элементов находятся внутри контейнера, можно задавать минимальную ширину для блока и перенос элементов на новый ряд с помощью свойств flex-basis и flex-wrap.
flexbox-grids-wrap-css

Отзывчивость в Grids

Чтобы быть уверенным, что ваша верстка всегда будет отзывчивой и что ваши компоненты будут всегда иметь минимальную ширину, мы можем использовать функцию minmax() и юнит fr. Этот юнит был создан для помощи в создании гибких сеток. Один fr — условная единица относительно доступной ширины контейнера. Поскольку fr учитывает отступ между ячейками, он выполняет всю математику для нас и вычисляет правильную ширину для каждой ячейки.

grids-full layout

Если вам понадобится более точно задать внешний вид элементов для мобильных экранов, то media queries никто не отменял.

Production ready

Flexbox и CSS Grid готовы к использованию в продакшине с тех пор, как стали поддерживаться всеми браузерами. Microsoft Edge 15 еще со старым синтаксисом Grid, но в 16 версии все исправили. Исправления входят в обновление за 16 октября 2017 года.

Если вы хотите поддерживать все браузеры (да-да, конечно хочу!), тогда рекомендуется использовать feature queries, для реализации альтернативной разметки в случае, если свойство не поддерживается или имеет устаревший синтаксис.

.grid-parent{
  /* Fallback layout */
}
 
@supports (display: grid) {
  .grid-parent{
    /* Use grids */
  }
}

В заключение

Не позволяйте маглам убедить вас, что надо отказываться от CSS Grid сейчас. Необоснованные мифы на тему Flexbox vs. Grids не должны останавливать вас внедрять современные технологии в разметку ваших страниц. Легкая настройка и отличная поддержка современными браузерами более чем достаточно, чтобы включить эти техники в набор повседневных инструментов.

Подписывайтесь

Для получения уведомлений о новых публикациях — подписывайтесь на мой блог или страницы в соц. сетях: Twitter, Facebook.

Подписаться на блог по эл. почте