От автора: мы решили развеять мифы о Flexbox и Grids, чтобы показать мощь этих технологий при их совместном использовании. Реализация Grids во всех браузерах заняла более шести лет. На протяжении всей жизни спецификации вокруг нее велась полемика. В 2011 ее встретили со скептицизмом, так как команда Microsoft Developer Team объявила о префиксной поддержке для IE10. Недостаток информации о предложении W3C заставил некоторых разработчиков сомневаться в необходимости другой системы макетирования, так как у нас уже были обтекания, таблицы и Flexbox. Тем не менее, благодаря усилиям разработчиков и членов CSS Working Group (Rachel Andrew и Jen Simmons) популярность Grids начала расти, а значит, появились behind-flag и ночные сборки.
На март 2017 Grids внедрен во все основные браузеры, но до сих пор витает парочка слухов и мифов вокруг спецификации. Цель этой статьи развеять эти мифы и перейти на удобную разработку сайтов с помощью этой новой техники, которую мы используем на Aerolab (Frids-layout).
Выражения типа «Grids пришел, чтобы убить Flexbox» или что Grids готов к продакшн и необходимо использовать «Flexbox как фолбек для Grids» неправильные. Надеюсь, мы не будем следовать таким советам.
Так что читайте и давайте разберем эти мифы, чтобы понять истинную силу двух технологий, работающих вместе, а не против друг друга. Также мы разберем реальные примеры использования из продакшна, а в конце статьи вас ждут HTML и CSS шаблоны.
Разрушенные мифы
Серия слухов о «Grids и Flexbox», которые начали распространяться в 2010. О двух я говорил ранее, их нужно развенчать.
«1. Grids пришел, чтобы убить Flexbox. Нет. Сегодня умрет только один, и это будешь ты, табличный макет! Люди склонны сталкивать технологии (и людей) друг с другом. И даже если сравнение и соревнование зачастую ведет к развитию индустрии, это не тот случай.»
Flexbox и Grids разрабатывались примерно в одном время, но для разных целей, о чем мы поговорим дальше в статье. Если у вас еще осталась толика сомнений, то у Grids и Flexbox одни и те же редакторы в черновике W3C. Они работают вместе, они не соревнуются.
«1. Flexbox – это фолбек для Grids. Не гонись за кваффлом, если видишь снитч. Это приводит нас к предыдущей мысли – цели Flexbox и Grids отличаются. Поэтому не стоит строго придерживаться мнения, что предыдущую технологию необходимо использовать как фолбек, особенно если ее поддержка в IE такая же плохая, как у Grids.»
Работа с Frids-layout
Начнем с разбора разных юз кейсов и способов, когда они дополняют друг друга:
Одномерное макетирование. Если контент необходимо расположить в одном измерении, будь-то горизонталь (ось Х) или вертикаль (ось У), вам необходимо, чтобы макет отвечал контенту элементов. Тогда вам нужен Flexbox. Он отлично подходит для компонентов (но не ограничен ими).
Двумерное макетирование. Если контент необходимо расположить в двух осях, то есть в виде… сетки! Это свойство идеально подходит для макетов страниц и сложных, нелинейных компонентов.
В каждом правиле есть, конечно, исключения, но вам будет намного удобнее, если вы зарезервируете Grids для основных и визуально сложных макетов, а Flexbox для линейных макетов.
В 2017 разработчики лучше знают Flexbox чем Grids. Если вы не видели Grids в продуктиве, настоятельно рекомендую посетить сайт Full Stack Fest Barcelona. Их раздел speakers впечатляет.
Несмотря на разные цели, у них есть общие внутренние свойства, так как, в конце концов, они оба являются инструментами макетирования. Общие свойства входят в новую спецификацию CSS Box Alignment Specification – разработчики со всего мира давно просили этого. Помните тот ад с вертикальным выравниванием? Хорошие времена.
Спецификация Box Alignment
Новая спецификация включает распределение контента и самовыравнивающиеся функции, которые можно применять к блочным элементам в Flexbox или Grids.
Элементы выравнивания внутри флекс контейнера
Распределение элементов внутри флекс контейнера
Выравнивание элементов внутри Grids контейнера
Остановимся ненадолго и разберем предыдущее демо:
Прежде всего, мы создаем трехколоночную сетку с помощью repeat(). Каждая колонка шириной 1fr. Затем с помощью свойств align-items и justify-items мы выравниваем ячейки по осям Х и У, а с помощью align-self и justify-self выравниваем одну ячейку или растягиваем ее на всю доступную высоту.
Это общие свойства с Flexbox, вы можете их уже знать. Основная разница в том, что мы не ставим “flex-start” и “flex-end”, а только “start” и “end”.
Распределение элементов внутри Grids контейнера
Есть другой набор свойств, которые будут делить в скором времени Flexbox и Grids — grid-gap. Эту функцию сильно просили разработчики, с ее помощью можно будет устанавливать расстояние между флекс элементами. Свойства grid-row-gap и grid-column-gap переименуют в row-gap и column-gap. Но без паники! Ваш старый код все еще будет работать.
Flexbox и Grids вместе
После создания сетки в ячейки необходимо добавить контента. Будь-то изображения, текст или и то и другое, лучше всего их расположить с помощью Flexbox.
Примите адаптивность
В отличие от обтеканий и других устаревших систем макетирования, Flexbox и Grids созданы в эру множества разных устройств. Поэтому в их основу заложена адаптивность и тягучесть, чего не хватает в старых методах. Вы увидите, что в этих двух системах есть множество способов адаптировать контент под экран пользователя.
Fluid Flexbox Layout
Flexbox адаптивен по умолчанию. После применения к элементу display: flex вы сразу получаете жидкий макет. В зависимости от количества контента необходимо применить минимальную ширину элементов. Для этого можно использовать свойства flex-basis и flex-wrap.
Fluid Grid Layout
Чтобы точно знать, что ваш Grids макету будет всегда адаптивным, и что у его компонентов будет минимальная ширина, мы можем использовать функцию minmax и единицы fr. Это единицы измерения для создания гибких сеток. Один fr равен доле доступного пространства в Grids контейнере. Так как они учитывают пространство между ячейками, то нам совсем не нужно ничего вычислять.
Если вы хотели изменить макет на маленьких экранах, вы всегда можете сделать это с помощью медиа запросов.
Готов в продакшн
Grids и Flexbox готовы к продуктиву, эти технологии поддерживаются во всех основных браузерах. В Microsoft Edge 15 есть поддержка Grids со старым синтаксисом. В Edge 16 пофиксили это с выходом последней стабильной версии Windows 10 Fall Creators Update 17 октября.
Если хотите полную поддержку браузеров, настоятельно рекомендую использовать функциональные запросы для обеспечения альтернативных макетов для браузеров без поддержки Grids или которые поддерживают старый синтаксис.
|
1 2 3 4 5 6 7 8 9 |
.grid-parent{ /* Fallback layout */ } @supports (display: grid) { .grid-parent{ /* Use grids */ } } |
Последнее, но не менее важное – следите за багами для Grids здесь и для Flexbox здесь.
MagicCube
MagicCube обратились в Aerolab за помощью в создании новой идентичности и разработке нового сайта.
После завершения UX и UI для новых страниц мы сразу поняли, что этот дизайн круто было бы сделать на Grids. Из-за сложного макета мы решили применить эту технологию вместе с функциональными запросами для браузеров без поддержки и Flexbox для размещения внутренних элементов. Grids дает быструю настройку и гибкость, с его помощью можно быстро вносить требуемые изменения!
Нам необходима была уверенность, что наш сайт понравится всем. Поэтому для браузеров Opera Browser, Samsung Internet и UC Browser мы применили метод изящной деградации с помощью CSS правила supports для перехода к более простому макету.
Результатом стала полностью адаптивная и доступная страница новостей, которая использовала сложных макет, когда пользователь заходил с нормального браузера, и отказывалась в другом случае к простому дизайну. Grids позволит нам изменять шаблон дизайна быстро и эффективно.
Использование Grids вместе с Flexbox
Не обращайте внимание на магглов – начните пользоваться Grids уже сегодня. Необоснованные слухи о Flexbox Vs. Grids не должны останавливать вас от использования новых удивительных макетов на сайте. Простой кастомизации и поддержки более чем достаточно для знакомства с этой техникой.
Не знаете откуда начать, внизу вас ждут шаблоны!
Ресурсы
Сначала изучение Grids может вызывать трудности. К счастью, в сети полно ресурсов:
Paper
Старый верный друг. Лучше всего начать мыслить в стиле сетки, это нарисовать ее на бумаге. Там вы сразу увидите, что такое колонки, строки и пропуски. Рисование на бумаге не займет много времени, а вы лучше поймете сетку.
Инструменты разработчика
В Firefox Developer Tools отличная встроенная интеграция Grids, в которой вы сможете переключать визуализацию колонок, строк и пропусков.
Chrome выпустил похожий инструмент.
Автор: Eva Ferreira
Источник: //aerolab.co/
Редакция: Команда webformyself.
