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

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

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

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

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

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

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

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

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

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

Код сетки:

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";
  }

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

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

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

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

body {
    grid-template:
      "header header" 10vh
      "top-left top-right" 40vh
      "bottom-left bottom-right" 40vh
      "footer footer" / 50vw 50vw;
    }

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

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

На 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.

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

Пример:

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

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

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

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 – это линейное макетное свойство, и оно работает внутри системы сеток. Однако это неидеальное решение для макетов страниц с горизонтальными и вертикальными областями. Инструменты работают вместе, чтобы сделать из макета конфетку.

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

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

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

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

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

Получить

Метки:

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

Комментарии 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