От автора: я с трудом сдерживал свое волнение перед выходом CSS Grid: над спецификацией довольно долго трудились, и вот она здесь! Grid очень быстро набрал поддержку в браузерах, и новости о сетке взорвали интернет (плюсуйте Edge). В Firefox появился довольно неплохой инструмент редактирования сетки в панели разработчика. Думаю, в Chrome скоро тоже появится такой режим.
Текущая поддержка:
Как-то давно я уже слышал про Grid, но не мог оценить возможности инструмента, пока не попробовал сам. А дальше было так: «Боже мой, это очень сильно нам поможет! CSS Grid – одна из наиболее продуманных и мощных спецификаций CSS, которые я видел за долгое время».
Сейчас в сети полно крутых уроков и ресурсов (все ссылки в конце статьи), поэтому этот пост будет не в форме руководства. Вместо этого мы поговорим о том, почему же все-таки CSS Grid так хорош! Надеюсь, этот пост заставит вас попробовать сетки!
Именованные области
В Grid реализовано несколько способов раскладки шаблонов, в том числе и новые единицы измерения fr или дроби (дробная часть пространства). Среди шаблонных свойств мое любимое — grid-template-areas! С его помощью можно создавать именованные области, образованные с помощью grid-template-columns и grid-template-rows. Можно буквально расписать карту дизайна!
Разберем пример:
Код сетки:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
body { /* одна колонка – половина ширины вьюпорта */ grid-template-columns: 50vw; /* хедер + секции = высота Размеры футера автоматические */ grid-template-rows: 10vh 40vh 40vh auto; /* grid template areas! */ grid-template-areas: "header header" "top-left top-right" "bottom-left bottom-right" "footer footer"; } |
что переводится в:
Так, я правильно понял!?
Код выше можно сделать еще короче!:
|
1 2 3 4 5 6 7 |
body { grid-template: "header header" 10vh "top-left top-right" 40vh "bottom-left bottom-right" 40vh "footer footer" / 50vw 50vw; } |
Можно использовать смайлики для визуализации отступов в сетке:
На flexbox можно написать фолбеки, но это сложно, а также это еще больше строк кода. Заметил, что писать макеты сразу на CSS Grid – это хороший способ понять принцип построения макета, а это в будущем упрощает написание фолбеков для Flexbox, как в первом примере.
Вставляйте разделители так, как вам нужно
В CSS Grid есть свойство grid-gap, с помощью которого задаются разделители между элементами. В сетках адаптивных дизайнов мы очень долго боролись с этой проблемой.
Раньше для создания отступов в flexbox или системе сеток, построенной на свойстве float, мы любили использовать margin’ы. Такой подход приводил к странным ситуациям, когда нужно было удалять ненужные отступы (например, margin вокруг контейнера сетки).
Раньше эти проблемы мы решали несколькими способами:
Сперва мы прибегали к JS, в котором считали количество элементов, после чего применяли к ним специальные классы для удаления margin’ов на основе положения элементов.
Потом мы использовали адаптивные Grid-фреймворки, которые по большей части работали с процентами. Нам приходилось указывать количество колонок и их ширину.
Затем мы пытались удалять внешние margin’ы с помощью свойства nth-children, из-за чего код мог поломаться при любом изменении размера экрана.
Потом разделители в сетке можно было задавать через функцию calc (функция умеет смешивать единицы измерения), однако код все равно получался довольно сложным. Нужно было знать количество элементов в строке или же использовать хаки с отрицательным позиционированием и свойством overflow: hidden на внешних разделителях.
Я считаю, что CSS Grid решил все эти проблемы. Инструмент поместил разделители между элементов. Именно там, где они и должны быть одной строкой четкого и краткого CSS.
Minmax
С Grid появилась CSS-функция minmax(), с помощью которой можно устанавливать минимальную и максимальную ширину (высоту) контейнера. Если вы похожи на меня, то сразу подумали: «Эммм… ЧТО?! ДА. НАКОНЕЦ-ТО». Но вы, наверное, не так сильно увлечены стилями, как я.
Можно использовать:
любые фиксированные единицы (px, em, vw и т.д.);
Grid-единицы (1fr);
Проценты (40%);
min-content;
max-content;
auto.
Мощный код в паре строк. Элементы в сетках довольно гибкие и могут увеличиваться и уменьшаться до определенных размеров. Это значит, что от медиа запросов можно избавиться. Еще лучше, это подводит нас ближе к элементным запросам, где гибкость элементов завязана на размере личного контейнера, а не окна браузера.
Пример:
В этом демо нет фолбека. Вот так это должно выглядеть на тот случай, если вы сидите в старом браузере:
Minmax + Auto flow позволяют создавать по-настоящему крутые макеты. В примере сверху большая область контента была установлена в auto flow, а на сайдбар задан minmax. Вся сетка с хедером, контентом возле сайдбара, но отделенного от футера выглядит так:
|
1 2 3 4 5 6 7 8 9 10 11 |
body { display: grid; grid-gap: $gutter; grid-template-columns: minmax(150px, 400px) auto; grid-template-rows: 10vh $img-sec-h $img-sec-h auto; grid-template-areas: "side header header" "side top-left top-right" "side bottom-left bottom-right" "footer footer footer"; } |
Я не устанавливал ширину для элементов и не использовал calc! И я говорил, что CSS Grid работает одновременно горизонтально и вертикально для строк и столбцов!?
Заключение
Спецификация CSS Grid дает разработчикам и дизайнерам множество мощных свойств, а также сильно упростит и добавит семантики в макеты. Сетка просто работает. Я даже зол, что все так просто.
Стоит заметить, что CSS Grid не заменяет Flexbox. Они работают вместе. Flexbox – это линейное макетное свойство, и оно работает внутри системы сеток. Однако это неидеальное решение для макетов страниц с горизонтальными и вертикальными областями. Инструменты работают вместе, чтобы сделать из макета конфетку.
Источник: //una.im/
Редакция: Команда webformyself.
