От автора: эта неделя ознаменовала выход CSS Grid в последних версиях Firefox и Chrome без дополнительного флага, что стало настоящим праздником для front-end разработчиков. Теперь можно играться с Grid в двух последних версиях этих браузеров. Но что такого в этой CSS Grid, нужна ли она нам?
CSS Grid – первая настоящая система макетирования для веба. Система спроектирована для организации контента в колонки и ряды. У разработчиков буквально появился режим Бога по контролю за экраном. Это значит, что можно выбросить десятилетия хаков и обходных решений по расстановке элементов на веб-странице. Сложные макеты и красивые страницы теперь не просто реальны, теперь их легко создавать и обслуживать.
С CSS Grid веб станет гораздо более привлекательным местом.
Понятно, а как работает Grid? В сети полно сложных уроков с ужасающим количеством информации. Я считаю, что начать нужно с самых основ. Сегодня мы создадим довольно простой пример с буквами из алфавита.
Для начала добавим разметку:
|
1 2 3 4 5 6 7 8 |
<div class='wrapper'> <div class='letter'> A </div> <div class='letter'> B </div> </div> |
Первым делом мы добавим правильные стили буквам (font-size и color). Далее центрируем буквы внутри div’ов с помощью flexbox-свойств align-items и justify-content. И да, CSS Grid не заменяет flexbox-свойства, а дополняет их. Многие из этих свойств можно использовать в паре с CSS Grid. А сейчас вернемся к демо:
В примере выше два простых div’а, расположенных один под другим (по умолчанию display: block). Необходимо сделать так, чтобы родительский элемент использовал макет Grid:
|
1 2 3 |
.wrapper { display: grid; } |
Что дает нам:
Видно, что ничего не видно. И все правильно! В отличие от display: inline-block; или display: inline; со значением grid не все так понятно. Чтобы сетка хоть как-то себя показала, ей нужно скормить несколько колонок и рядов. В этом примере мы просто выровняем буквы рядом в две колонки:
|
1 2 3 4 5 6 |
.wrapper { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 1px; background-color: black; } |
Давайте разберем код. Сперва мы создаем две колонки в сетке с помощью grid-template-columns. Значение 1fr может показаться неправильным, если вы раньше его не видели. Но все верно, это значение говорит, что колонки будут занимать всю свою ширину в сетке. В нашем примере это значит, что будет две колонки одинаковой ширины.
В итоге получится что-то похожее:
Ура, работает! Видите этот пробел между колонок? Это виден фон wrapper, проскакивающий сквозь letter, так как мы задали grid-column-gap в 1px. Обычно приходится задавать большее значение column-gap, особенно если мы выравниваем блоки рядом. Но в нашем примере хватит и 1 пикселя.
Что будет, если мы добавим две новые буквы в разметку? Что изменится в макете?
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class='wrapper'> <div class='letter'> A </div> <div class='letter'> B </div> <div class='letter'> C </div> <div class='letter'> D </div> </div> |
Технически в сетке ничего не изменится. Мы уже задали две колонки, и эти две буквы лягут ровно под другими и будут точно 1fr в ширину:
Теперь что странно, почему между буквами А и С, а также В и D нет пробела в 1px? Свойство grid-column-gap используется только для колонок, и так мы создали новую строку в сетке. Чтобы увидеть изменения, нужно воспользоваться свойством grid-row-gap:
|
1 2 3 4 5 6 |
.wrapper { grid-column-gap: 1px; grid-row-gap: 1px; /* другие стили */ /* также можно было использовать сокращение `grid-gap` */ } |
Вот так это выглядит:
Вот мы и создали нашу первую сетку. Мы создали строки и колонки, для этого нам потребовалось лишь изменить разметку. Давайте разберем колонки поподробнее. Что будет, если изменить значение свойства grid-template-columns? Вот так:
|
1 2 3 |
.wrapper { grid-template-columns: 1fr 1fr 1fr; } |
Мы создали еще одну колонку, все ясно! Обратите внимание, что мы теперь свободно видим фоновый цвет контейнера, так как не хватает дочерних элементов:
Если изменить значение fr в этом свойстве, то у нас получится так называемая ассиметричная сетка. Например, давайте сделаем так, чтобы первая колонка занимала в три раза больше места, чем другие две:
|
1 2 3 |
.wrapper { grid-template-columns: 3fr 1fr 1fr; } |
Колонка с буквами А и D стала больше других, как и ожидалось:
Разве это не сильно? Больше не нужно подбирать отрицательные margin’ы и идеальные значения в процентах, чтобы правильно выровнять колонки. Можно создавать супер сложные сетки, не думая о вычислениях, которые нам пришлось бы делать раньше. Теперь нужно всего лишь добавить новое значение свойству grid-template-columns и все, магическим образом в сетке появляется новая колонка!
Вы можете задаться вопросом насчет адаптивных сеток. Все так же просто, нужно лишь менять это свойство внутри медиа запроса. Например, нам нужно по умолчанию иметь 2 колонки. На уровне 500px колонок должно быть 3, а на больших экранах весь контент перемещается в 4 колонки. Для этого нам потребовалось бы написать следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.wrapper { display: grid; grid-template-columns: 1fr 1fr; @media screen and (min-width: 500px) { grid-template-columns: 1fr 1fr 1fr; } @media screen and (min-width: 800px) { grid-template-columns: 1fr 1fr 1fr 1fr; } } |
Откройте демо в новой вкладке и измените размер вьюпорта, чтобы проверить адаптивность!
Свойство grid-template-columns намного сложнее, чем то, что я здесь показал, но это хорошая отправная точка. Далее нужно изучить свойство из спецификации CSS Grid, которое реально меняет что-то: grid-template-rows.
Давайте смотреть. Давайте попробуем догадаться, что делает это свойство. Посмотрите на код ниже и вспомните все, что знаете о Grid.
|
1 2 3 4 5 |
.wrapper { display: grid; grid-template-columns: 3fr 1fr 1fr; grid-template-rows: 1fr 3fr; } |
Вместо установки ширины колонок и их взаимосвязей мы теперь задаем высоту строк и их отношения. Так что если взять предыдущий пример и задать последнее значение в 3fr, то вторая строка всегда будет в три раза больше по высоте, чем первая:
Вроде бы ничего сложного, но раньше мы так делать не могли. Раньше приходилось писать грубые хаки. Например, устанавливать min-height на определенном элементе или менять класс. Но у нас не было возможности устанавливать связи между строками. Это и делает CSS Grid мощным инструментом.
С такими небольшими знаниями и парочкой новых свойств мы можем создавать настолько сложные макеты, что ассиметричные и адаптивные сетки будут составлять лишь небольшую их часть. И это лишь верхушка айсберга спецификации CSS Grid, там очень много нового. Jen Simmons лучше всего описала новый инструмент в своей статье:
«CSS Grid нужно изучать до тех пор, пока мы не поймем, что с его помощью нужно делать, что с его помощью можно сделать принудительно, а также что нельзя сделать. Многим дизайнерам можно даже не изучать CSS, но вам нужно хорошо знать CSS, чтобы понимать художественную среду.»
Конечно, код сверху первое время будет казаться странным. Однако теперь нам не нужны гигантские CSS фреймворки и все эти хаки для макетов, которые совсем не актуальны. Что меня больше всего радует в Grid, это то, что он заставляет нас смотреть на пространство в браузере по-другому.
Нам нужно выучить не только кучу новых свойств, но и переосмыслить все, что узнали в прошлом. CSS Grid – это не просто спецификация, а целая философия.
Давайте изучать ее вместе!
Поддержка в браузерах
Данные о поддержке взяты с сайта Caniuse, где также сказано, что функция находится в статусе W3C Candidate Recommendation.
Автор: Robin Rendle
Источник: //css-tricks.com/
Редакция: Команда webformyself.
