3 свойства CSS Grid, которые заставляют мое сердце трепетать

3 свойства CSS Grid, которые заставляют мое сердце трепетать

От автора: я с трудом сдерживал свое волнение перед выходом CSS Grid: над спецификацией довольно долго трудились, и вот она здесь! Grid очень быстро набрал поддержку в браузерах, и новости о сетке взорвали интернет (плюсуйте Edge). В Firefox появился довольно неплохой инструмент редактирования сетки в панели разработчика. Думаю, в Chrome скоро тоже появится такой режим.

Текущая поддержка:

3 свойства CSS Grid, которые заставляют мое сердце трепетать

Как-то давно я уже слышал про Grid, но не мог оценить возможности инструмента, пока не попробовал сам. А дальше было так: «Боже мой, это очень сильно нам поможет! CSS Grid – одна из наиболее продуманных и мощных спецификаций CSS, которые я видел за долгое время».

Сейчас в сети полно крутых уроков и ресурсов (все ссылки в конце статьи), поэтому этот пост будет не в форме руководства. Вместо этого мы поговорим о том, почему же все-таки CSS Grid так хорош! Надеюсь, этот пост заставит вас попробовать сетки!

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

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

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

Именованные области

В Grid реализовано несколько способов раскладки шаблонов, в том числе и новые единицы измерения fr или дроби (дробная часть пространства). Среди шаблонных свойств мое любимое — grid-template-areas! С его помощью можно создавать именованные области, образованные с помощью grid-template-columns и grid-template-rows. Можно буквально расписать карту дизайна!

Разберем пример:

Код сетки:

что переводится в:

3 свойства CSS Grid, которые заставляют мое сердце трепетать

Так, я правильно понял!?

Код выше можно сделать еще короче!:

Можно использовать смайлики для визуализации отступов в сетке:

3 свойства CSS Grid, которые заставляют мое сердце трепетать

На flexbox можно написать фолбеки, но это сложно, а также это еще больше строк кода. Заметил, что писать макеты сразу на CSS Grid – это хороший способ понять принцип построения макета, а это в будущем упрощает написание фолбеков для Flexbox, как в первом примере.

Вставляйте разделители так, как вам нужно

В CSS Grid есть свойство grid-gap, с помощью которого задаются разделители между элементами. В сетках адаптивных дизайнов мы очень долго боролись с этой проблемой.

Раньше для создания отступов в flexbox или системе сеток, построенной на свойстве float, мы любили использовать margin’ы. Такой подход приводил к странным ситуациям, когда нужно было удалять ненужные отступы (например, margin вокруг контейнера сетки).

Раньше эти проблемы мы решали несколькими способами:

Сперва мы прибегали к JS, в котором считали количество элементов, после чего применяли к ним специальные классы для удаления margin’ов на основе положения элементов.

Потом мы использовали адаптивные Grid-фреймворки, которые по большей части работали с процентами. Нам приходилось указывать количество колонок и их ширину.

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

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

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

Затем мы пытались удалять внешние margin’ы с помощью свойства nth-children, из-за чего код мог поломаться при любом изменении размера экрана.

Потом разделители в сетке можно было задавать через функцию calc (функция умеет смешивать единицы измерения), однако код все равно получался довольно сложным. Нужно было знать количество элементов в строке или же использовать хаки с отрицательным позиционированием и свойством overflow: hidden на внешних разделителях.

Я считаю, что CSS Grid решил все эти проблемы. Инструмент поместил разделители между элементов. Именно там, где они и должны быть одной строкой четкого и краткого CSS.

Minmax

С Grid появилась CSS-функция minmax(), с помощью которой можно устанавливать минимальную и максимальную ширину (высоту) контейнера. Если вы похожи на меня, то сразу подумали: «Эммм… ЧТО?! ДА. НАКОНЕЦ-ТО». Но вы, наверное, не так сильно увлечены стилями, как я.

Можно использовать:

любые фиксированные единицы (px, em, vw и т.д.);

Grid-единицы (1fr);

Проценты (40%);

min-content;

max-content;

auto.

Мощный код в паре строк. Элементы в сетках довольно гибкие и могут увеличиваться и уменьшаться до определенных размеров. Это значит, что от медиа запросов можно избавиться. Еще лучше, это подводит нас ближе к элементным запросам, где гибкость элементов завязана на размере личного контейнера, а не окна браузера.

Пример:

В этом демо нет фолбека. Вот так это должно выглядеть на тот случай, если вы сидите в старом браузере:

3 свойства CSS Grid, которые заставляют мое сердце трепетать

Minmax + Auto flow позволяют создавать по-настоящему крутые макеты. В примере сверху большая область контента была установлена в auto flow, а на сайдбар задан minmax. Вся сетка с хедером, контентом возле сайдбара, но отделенного от футера выглядит так:

Я не устанавливал ширину для элементов и не использовал calc! И я говорил, что CSS Grid работает одновременно горизонтально и вертикально для строк и столбцов!?

Заключение

Спецификация CSS Grid дает разработчикам и дизайнерам множество мощных свойств, а также сильно упростит и добавит семантики в макеты. Сетка просто работает. Я даже зол, что все так просто.

Стоит заметить, что CSS Grid не заменяет Flexbox. Они работают вместе. Flexbox – это линейное макетное свойство, и оно работает внутри системы сеток. Однако это неидеальное решение для макетов страниц с горизонтальными и вертикальными областями. Инструменты работают вместе, чтобы сделать из макета конфетку.

Источник: https://una.im/

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

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

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

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

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree