От автора: в своей предыдущей презентации на Fluent Conf я продемонстрировал общие возможности и различия Flexbox и CSS Grid Layout. Пока что мы можем работать с CSS Grid Layout, включив специальный флаг в настройках браузера, однако, как только технология выйдет официально, в макетах появится множество задач, где можно будет использовать Grid или Flexbox. Я немного поразмыслил на эту тему.
Большие макеты или UI элементы
Когда люди впервые видят CSS Grid Layout, они, как правило, думают, что сетка это контроллер основного макета страницы, выступающий в роли фреймворка с набором хедеров, сайдбаров, основного контента и футеров.
В примере выше показан этот способ применения. Только прямые дочерние элементы могут стать ячейками сетки, а значит, если объявить сетку на общем контейнера, то хедер, панель, контент и футер станут ячейками сетки. Любые элементы внутри таких контейнеров могут выводиться любым нужным способом.
Flexbox не так хорошо подходит для создания макетов данного типа. С помощью Flexbox можно создать простой макет, как в демо выше, однако после объявления флекс-контейнера, все ряды (или колонки, если задать flex-direction: column) становятся самостоятельными флекс-контейнерами. В колонках или рядах все пространство распределяется между элементами равномерно, и вы не сможете выстроить в ряд элементы, как показано выше.
В этом и есть самое большое различие между Grid и Flexbox. Flexbox в первую очередь предназначен для вывода элементов в одном направлении – в ряд ИЛИ в столбец. Grid можно использовать для вывода элементов в двух направлениях одновременно – ряды И столбцы.
Одномерное расположение или двумерное
Самый простой пример двух разных макетов.
В верхней части макета я с помощью Flexbox вывожу на экран несколько карточек. Контейнеру задано свойство flex-wrap: wrap, поэтому элементы выстроились в два столбца. Также были заданы свойства flex-grow: 1, flex-shrink: 1 и flex-basis: 300px. Идеальная ширина блоков составляет 200px, но они могут становиться как шире, так и уже.
Если экран слишком мал, то на одной строке показывается 3 блока, а на второй 2 оставшихся. Если задать свойству flex-grow значение 1, то после удаления значения flex-basis оставшееся пространство распределяется равномерно между всеми блоками. В строке 1 помещается 3 блока, и они уже, чем блоки во второй строке, так как там их всего 2.
Так работает flexbox. Тем не менее, большая часть вопросов, которые мне задавали, когда у разработчиков возникали проблемы с flexbox, возникали потому, что те пытались выводить элементы с помощью данной технологии в двух измерениях. В данном случае вам нужен Grid Layout.
Во второй части демо мы задаем сетку на контейнере, а дочерние элементы контейнера становятся ячейками. Ячейки сетки можно выводить как в строку, так и в столбец. Если один из элементов необходимо растянуть на два столбца или строки, нам понадобится его как-то найти.
Отталкиваемся от определения контента или от определения сетки
В примере выше мы наблюдаем, как при использовании Grid Layout после создания сетки ее ячейки адаптируются под доступные размеры.
Если у вас много элементов, не надо выстраивать их в один ряд с другими элементами, просто выстраивайте их на равномерных расстояниях друг от друга, как в flexbox. Самый простой пример, демонстрирующий то, как задать между элементами равные расстояния, это свойство justify-content: space-between.
В Grid есть свойства, отвечающие за распределение в пространстве и выравнивание (свойства из Box Alignment Module). Т.е. можно поиграться с выравниванием и расстояниями между элементами сетки. Но факт остается фактом – из-за двумерного подхода в grid нельзя сделать так, чтобы одна строка сетки отображалась не так, как строка выше. Вам придется задавать свойства к отдельным элементам, чтобы они занимали несколько ячеек или использовать разные значения выравнивания.
Выбор за вами. Вы хотите отображать контент только построчно или в колонках? Тогда вам нужен flexbox.
Или вы хотите работать с сеткой? Чтобы элементы сетки автоматически размещались в ячейках сетки, или же можно контролировать их позиционирование при помощи строк и областей сетки. Тогда вам нужен grid.
Больше примеров использования сетки вы можете найти в моей коллекции на сайте Grid by Example.
Автор: Rachel Andrew
Источник: //rachelandrew.co.uk/
Редакция: Команда webformyself.