Grid против Flexbox: сравнение на практике

Grid против Flexbox: сравнение на практике

Не так давно HTML сетка версталась с помощью флоатов, таблиц и других CSS свойств мало пригодных для этого занятия.
Потом появился flexbox, созданный специально для создания адаптивных сеток. Он значительно упростил выравнивание элементов и их содержимого, став незаменимой практикой для большинства современных фронтендеров.
Сейчас мы имеем нового претендента на «самая-лучшая-система-построения-HTML-сеток» трофей (название трофея в процессе разработки). Это мощнейший CSS Grid, который к концу этого месяца будет доступен в Firefox 52 и Chrome 57, а в дальнейшем, надеюсь, и в остальных браузерах тоже.

ТЕСТ БАЗОВОЙ СЕТКИ

Чтобы понять, что такое строить сетки с помощью каждой системы, просто-напросто создадим две одинаковые HTML-страницы – одну на флексах, другую на CSS Grid. Вы можете скачать оба проекта или посмотреть их на этом онлайн-демо:
ТЕСТ БАЗОВОЙ СЕТКИ
Дизайн, как видите, самый простой. Сайт состоит из отцентрированного контейнера, который включает в себя шапку, основное содержимое, сайдбар и футер. Вот основные задачи, которые мы должны решить, сохранив при этом CSS и HTML-код как можно более чистым и понятным:

  1. Размещение четырех основных элементов макета.
  2. Создание адаптивной страницы (на маленьких экранах сайдбар должен перемещаться под основное содержимое).
  3. Выравнивание контента в шапке – навигация к левому краю, кнопка к правому.

Итак, разберем их по порядку.

ЗАДАЧА 1: ПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ СТРАНИЦЫ

Flexbox решение

Начнем с примера, в котором использованы флексы. Пропишем контейнеру display: flex и направление элементов по вертикали. Это позволит расположить элементы друг под другом.

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

Зададим обертке display: flex и горизонтальное направление главной оси.

Последним шагом определим размеры основного содержимого и сайдбара. Мы хотим, чтобы main section была в три раза больше sidebar, для этого установим отношение с помощью свойства flex.

Как вы видите, flexbox отлично справился с этим заданием, однако нам потребовалось добавить лишний HTML элемент и прописать правый отступ основному контенту. Давайте посмотрим, что получится, если использовать CSS Grid.

CSS Grid решение

Существует несколько способов построения сетки на гридах. Конкретно здесь мы применим свойство grid-template-areas, т.к. оно является наиболее подходящим для решения нашей задачи.
Во-первых, мы определим четыре grid-area для каждого компонента нашей сетки.

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

Это всё! Теперь наша сетка будет иметь заданную нами структуру, при этом отступы между элементами реализованы без применения margin и padding.

ЗАДАЧА 2: ПРИДАНИЕ СТРАНИЦЕ АДАПТИВНОСТИ

Flexbox решение

Для выполнения этого шага нам нужно будет поменять flex-direction обертки и отступы основного контента на маленьких ширинах экрана.

Наша страница проста, поэтому в медиа-запросе не так много переработок, однако для более сложного проекта нужно будет переопределять достаточно много свойств.

CSS Grid решение

Т.к. мы уже определили grid-areas, в медиа-запросе достаточно будет только изменить их порядок на макете. Настройки столбцов можно не трогать.

Или можно переопределить весь макет заново, если вам кажется, что это более чистое решение.

ЗАДАЧА 3: ВЫРАВНИВАНИЕ ЭЛЕМЕНТОВ ШАПКИ

Flexbox решение

Наш хедер состоит из навигационного меню и кнопки. Мы хотим, чтобы кнопка была справа, а меню, соответственно, слева, при этом элементы в nav должны быть выровнены по вертикали.

Сначала добавим шапке display: flex и выровняем элементы по горизонтали.

Далее расположим список в строку и выровняем его по базовой линии.

Всего четыре строчки! Неплохо. Посмотрим, как с этим разберется CSS Grid.

CSS Grid решение

Чтобы разместить nav и кнопку по краям сетки, пропишем хедеру display: grid и разделим его на два столбца. Кроме того, спозиционируем каждый из элементов по соответствующим границам сетки – навигацию в начале строки, а кнопку в конце.

Что касается ссылок в навигации, то у нас не получилось сверстать их правильно, используя только CSS Grid (в итоге добавили стандартный display: inline-block). Максимум, что удалось достигнуть:
ВЫРАВНИВАНИЕ ЭЛЕМЕНТОВ ШАПКИ
Ссылки, конечно, встали в строку, но выровнять их по базовой линии не удалось, т.к. в гридах такого свойства просто-напросто не предусмотрено. Также нам пришлось задать display: grid и контейнеру nav.

На самом деле, ничего удивительного в этом нет. Все же в CSS Grid основное внимание сосредоточено на выравнивании элементов сетки, а не выравнивании контента внутри них. С этим отлично справляются и существующие техники.

ВЫВОД

Если вы прочли всю статью (отличная работа!), заключение не должно вас удивить. Правда в том, что из двух этих систем нет «более лучшей», каждая техника имеет свои сильные и слабые стороны. Флексы и гриды должны и будут использоваться вместе, идеально дополняя друг друга.
Ну а для тех, кто сразу пролистал до конца статьи (читеры!) тезисно пройдемся по её основным положениям:

  • CSS Grids отлично подходят для построения основной сетки. Они позволяют легко управлять порядком и позиционированием крупных сеточных элементов, при этом без проблем справляясь с нестандартными и асимметричными макетами.
  • Flexbox идеален для выравнивания блоков внутри основных элементов. Используйте флексы для верстки небольших элементов макета.
  • Используйте CSS Grid, когда верстаете сразу по двум направлениям (и по строкам, и по столбцам).
  • А flexbox, когда верстаете в одном направлении (или строку, или столбец).
  • Нет никаких причин выбирать какую-то одну технику для верстки. Учите обе системы и используйте их вместе.

Перевод статьи: http://tutorialzine.com/2017/03/css-grid-vs-flexbox/

Следить за обновлениями блога в: твиттере, фейсбуке, вконтакте

Отставить комментарий

Ваш электронный адрес не будет опубликован.Обязательные для заполнения поля отмечены *