Что использовать Grid или Flexbox?

Что использовать Grid или Flexbox?

От автора: в своей предыдущей презентации на 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

Источник: https://rachelandrew.co.uk/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

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

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

Я не робот.

Spam Protection by WP-SpamFree