Первые шаги при использовании сетки (Grid Layout) в CSS

Сегодня львиная доля современных и популярных сайтов построена с использованием адаптивного макета, flexbox или grid систем. Если вы возьмете любой популярный движок (CMS) и/или фреймворк — практически все они имеют встроенную поддержку адаптивности, чтобы вам проще было работать над разработкой дизайна. Флексбокс более популярен, но и Grid Layout имеет свое право на существование. Как заявляют авторы данной идеи, целью создания сеточного подхода в CSS является возможность размещения контента с механизмом предсказуемого разделения доступного пространства на столбцы и строки. Для любых размеров экрана и любых устройств.

Сетчатый макет Grid CSS включен в официальную спецификацию консорциума W3C (The World Wide Web Consortium), который разрабатывает стандарты и рекомендации для Всемирной паутины. Поэтому все моменты данного макета очень хорошо детализированы и стандартизированы. Также grid сетки имеют высокий процент поддержки современными браузерами. Давайте же перейдем к рассмотрению основных теоретических моментов использования гибкой сетки и попробуем на практике создать примитивный макет страницы.

Основные преимущества использования grid макета в CSS

• Модель макета CSS Grid может создавать и обновлять макет по двум осям: горизонтальной и вертикальной, изменяя как ширину, так и высоту элементов
• Используя Grid-систему построения макета, нам больше нет нужды в использовании свойства float или подобных свойств, чтобы создавать сложные структуры
• Расположение сетки не зависит от положения элементов в разметке, поэтому вы можете перемешивать расположение элементов в разметке, не меняя макет
• В данной модели грид-контейнер разделен на столбцы (columns) и строки (rows) линиями сетки. Это позволяет «наслаивать» друг на друга различные элементы
• Благодаря тому, что сетка Grid Макета способна явно позиционировать элементы, это позволяет кардинально преобразовывать визуальную структуру, без необходимости изменять разметку

Основные компоненты в сеточном макете

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

Обратите внимание на важные компоненты и составляющие grid-системы CSS:

• Новое понятие — единица измерения длины и высоты. Гибкая единица fr: с помощью данной единицы измеряется (высчитывается) доля пространства, которое остается доступным в сетке. Используется для основных свойств grid-макета grid-template-rows (высота) и grid-template-columns (ширина). Значение 1fr — это 1 часть доступного пространства, 0.5fr – это половина от доступной области, и так далее.
• Ячейка (cell): это наименьшие строительные блоки, из которых строится вся сетка. На рисунке ниже показано девять таких ячеек.
• Линия (line): используется для отделения элементов друг от друга. Это своего рода отступы (интервалы) между элементами. Могут быть как горизонтальными, так и как вертикальными. Устанавливается свойством grid-gap: row-gap column-gap; — первое значение для отступа между строками, во втором значении указываются отступы между столбцами. На скриншоте ниже линии обозначены пунктирными линиями.
• Трек (track): Это пространство между двумя равноудаленными линиями сетки. На рисунке ниже трек состоит из трех ячеек.
• Область (area): это прямоугольная часть сетки, которая может состоять из любого количества ячеек. И трек, и ячейку можно отнести по своему смыслу к области.

Как использовать макет сетки (Grid Layout)?

Чтобы превратить HTML-элемент в контейнер сетки, достаточно выбрать одно из трех display свойств:

• display: grid; — элемент преобразуется в грид-контейнер
• display: inline-grid; — элемент преобразуется в линейный (строчный) контейнер сетки
• display: subgrid; — если элемент является частью сетки, он преобразуется в подсетку, которая игнорирует свойства сетки grid-template-* и *-gap.

Простейший пример использования грид-макета на практике

Чтобы использовать макет Grid системы в CSS, вам нужен какой-то родительский элемент и один или несколько дочерних элементов. Для примера возьмем следующую разметку: у нас будет сетка, которая будет состоять из пяти областей (Хедер, Футер, Сайдбар, Основное меню и Основной Контент). Код HTML будет таким:

<div class="main-site-area">
  <header class="header">Шапка</header>
  <nav class="main-menu">Меню</nav>
  <nav class="sidebar">Боковая панель</nav>
  <main class="main-content">Основной контент</main>
  <footer class="footer">Подвал</footer>
</div>

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

<style>
/* Оформляем нашу HTML страницу в качестве сеточного макета — Grid Layout */
.main-site-area {
  display: grid;
  width: 100%;
  height: 500px;
  grid-template-areas:
    "head head head"
    "side menu menu"
    "side main main"
    "foot foot foot";
  grid-template-rows: 75px 40px 1fr 75px; /* 4 строки */
  grid-template-columns: 0.3fr 1fr; /* 2 столбца */
}
.header {
  grid-area: head;
  background-color: #5e58ff;
}
nav.main-menu {
  grid-area: menu;
  background-color: #f9ff58;
}
nav.sidebar {
  grid-area: side;
  background-color: #ff58a5;
}
.main-content {
  grid-area: main;
  background-color: #ccc;
}
.footer {
  grid-area: foot;
  background-color: #58ffb2;
}
</style>

А сейчас давайте немного разберемся в данном коде (фоновый цвет мы добавили только с целью визуального разделения различных областей).

• Определение grid-макета делаем в родительском элементе .main-site-area с помощью свойства display: grid;.
• Далее используем свойство grid-template-areas, чтобы указать какие дочерние области будут в сетке родителя. В нашем примере 5 дочерних областей. Каждой из них мы присвоили идентификатор (можно любое буквенное обозначение). В кавычках указываем, какие области будут в каждой строке (row).
• Потом с помощью свойства grid-template-rows указываем размеры (по высоте) для каждой строки. В нашем примере grid-template-rows: 75px 40px 1fr 75px; — это значит, что для первой строки (область с идентификатором head) мы установили высоту в 75px, для второй (menu) — 40px, для третьей (main) — 1fr (т.е., всю доступную высоту), и для четвертой строки (foot) — также 75px.
• Далее, также для родительского элемента, указываем значение размеров столбцов (по ширине) в свойстве grid-template-columns. В нашем примере grid-template-columns: 0.3fr 1fr; — т.е., есть 2 колонки, у первой (side) ширина 3fr (третья часть от доступной ширины родителя), а для второй (main) мы выставили 1fr (вся доступная оставшаяся ширина).
• После этого, в CSS стилях мы присваиваем каждому из 5 элементов идентификаторы через свойство grid-area. Например, элементу <main> с классом main-content мы присвоили идентификатор main — .main-content {grid-area: main;} и по схожему принципу — остальным элементам.

Чтобы визуально лучше представить себе структуру Grid макета в нашем примере, детально изучите следующий скриншот:

1. Пунктиром показаны границы ячеек, линии и области.
2. В легенде указаны идентификаторы элементов. А в боковых легендах указаны начало (start) и конец (end) каждого элемента (области, area).

Чтобы добавить пустое пространство (отступы) между элементами сетки, используйте свойство grid-gap.

Это простейший пример использования сетки Grid при верстке макета веб-страницы. Мы рассмотрели только небольшую поверхность данной мощной системы. Рекомендуем вам протестировать Grid Layout самому и поиграться с различными свойствами, чтобы более полно ее понимать.

Поддержка Grid Layout браузерами

В настоящее время систему Грид макета поддерживают все основные современные браузеры. И нет необходимости использовать префиксы или делать дополнительные шаги в виде включения флагов в браузере.

Данную технологию полностью не поддерживает браузер Opera Mini, а Internet Explorer ≥ 10 частично поддерживает с использованием префиксов -ms-.

Вместо эпилога

Развитие CSS никогда не останавливалось, и всегда стремилось облегчить верстальщикам работу по кодингу макетов. Когда-то давно веб-дизайнеры использовали только таблицы для создания макетов. Потом перешли на использование float и inline элементов. Позже появились гибкие флексбоксы, а сегодня и гибкий сеточный Grid Layout. Современные сайты строятся в своем преимуществе на flex структуре, несправедливо обходя вниманием грид-систему. Эти две технологии построения адаптивного дизайна являются наиболее популярными решениями, хотя и обладают своими как плюсами, так и минусами.

Целью сегодняшней статьи было познакомить вас с мощной и функциональной системой Grid макетов в CSS. Надеемся, что вам понравилась данная статья и вас заинтересовала немного обделенная вниманием верстальщиков технология сеток. Попробуйте ее, и вы увидите, что она позволяет без лишних сложностей создавать адаптивные макеты, — функциональные и легкие в обслуживании.

Спасибо за внимание!