Flexbox и Grids — ваши лучшие друзья в макетировании

Flexbox и Grids — ваши лучшие друзья в макетировании

От автора: мы решили развеять мифы о 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. О двух я говорил ранее, их нужно развенчать.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

«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 впечатляет.

Flexbox и Grids — ваши лучшие друзья в макетировании

Несмотря на разные цели, у них есть общие внутренние свойства, так как, в конце концов, они оба являются инструментами макетирования. Общие свойства входят в новую спецификацию CSS Box Alignment Specification – разработчики со всего мира давно просили этого. Помните тот ад с вертикальным выравниванием? Хорошие времена.

Спецификация Box Alignment

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

Элементы выравнивания внутри флекс контейнера

Flexbox и Grids — ваши лучшие друзья в макетировании

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

Flexbox и Grids — ваши лучшие друзья в макетировании

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

Flexbox и Grids — ваши лучшие друзья в макетировании

Остановимся ненадолго и разберем предыдущее демо:

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

Это общие свойства с Flexbox, вы можете их уже знать. Основная разница в том, что мы не ставим “flex-start” и “flex-end”, а только “start” и “end”.

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

Flexbox и Grids — ваши лучшие друзья в макетировании

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

Flexbox и Grids — ваши лучшие друзья в макетировании

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Flexbox и Grids вместе

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

Flexbox и Grids — ваши лучшие друзья в макетировании

Примите адаптивность

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

Fluid Flexbox Layout

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

Flexbox и Grids — ваши лучшие друзья в макетировании

Fluid Grid Layout

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

Flexbox и Grids — ваши лучшие друзья в макетировании

Если вы хотели изменить макет на маленьких экранах, вы всегда можете сделать это с помощью медиа запросов.

Готов в продакшн

Grids и Flexbox готовы к продуктиву, эти технологии поддерживаются во всех основных браузерах. В Microsoft Edge 15 есть поддержка Grids со старым синтаксисом. В Edge 16 пофиксили это с выходом последней стабильной версии Windows 10 Fall Creators Update 17 октября.

Если хотите полную поддержку браузеров, настоятельно рекомендую использовать функциональные запросы для обеспечения альтернативных макетов для браузеров без поддержки Grids или которые поддерживают старый синтаксис.

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

Последнее, но не менее важное – следите за багами для Grids здесь и для Flexbox здесь.

MagicCube

MagicCube обратились в Aerolab за помощью в создании новой идентичности и разработке нового сайта.

После завершения UX и UI для новых страниц мы сразу поняли, что этот дизайн круто было бы сделать на Grids. Из-за сложного макета мы решили применить эту технологию вместе с функциональными запросами для браузеров без поддержки и Flexbox для размещения внутренних элементов. Grids дает быструю настройку и гибкость, с его помощью можно быстро вносить требуемые изменения!

Flexbox и Grids — ваши лучшие друзья в макетировании

Нам необходима была уверенность, что наш сайт понравится всем. Поэтому для браузеров Opera Browser, Samsung Internet и UC Browser мы применили метод изящной деградации с помощью CSS правила supports для перехода к более простому макету.

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

Использование Grids вместе с Flexbox

Не обращайте внимание на магглов – начните пользоваться Grids уже сегодня. Необоснованные слухи о Flexbox Vs. Grids не должны останавливать вас от использования новых удивительных макетов на сайте. Простой кастомизации и поддержки более чем достаточно для знакомства с этой техникой.

Не знаете откуда начать, внизу вас ждут шаблоны!

Ресурсы

Сначала изучение Grids может вызывать трудности. К счастью, в сети полно ресурсов:

Paper

Старый верный друг. Лучше всего начать мыслить в стиле сетки, это нарисовать ее на бумаге. Там вы сразу увидите, что такое колонки, строки и пропуски. Рисование на бумаге не займет много времени, а вы лучше поймете сетку.

Инструменты разработчика

В Firefox Developer Tools отличная встроенная интеграция Grids, в которой вы сможете переключать визуализацию колонок, строк и пропусков.

Flexbox и Grids — ваши лучшие друзья в макетировании

Chrome выпустил похожий инструмент.

Автор: Eva Ferreira

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по CSS3

Прямо сейчас изучите 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