Макет CSS Grid

Сетка — это набор пересекающихся горизонтальных и вертикальных линий, которые определяют столбцы и строки сетки.

CSS предоставляет систему макетирования на основе сетки со строками и столбцами, что упрощает проектирование веб-страниц без необходимости использовать float и позиционирование.

Ниже представлен простой макет веб-страницы, использующий grid-раскладку и содержащий шесть столбцов и три строки:

Попробуйте сами »

Поддержка браузеров

В настоящее время все последние версии браузеров поддерживают grid-раскладку.

Элемент сетки

Grid-раскладка состоит из родительского элемента и одного или нескольких дочерних элементов.

свойство display

Когда HTML-элемент задаёт для свойства display значение grid или inline-grid, он становится grid-контейнером, а все его прямые дочерние элементы становятся grid-элементами.

Трек сетки

Мы используемgrid-template-columnsиgrid-template-rowsсвойства для определения столбцов и строк в сетке.

Эти свойства определяют треки сетки. Трек сетки — это пространство между любыми двумя линиями в сетке.

На изображении ниже вы можете увидеть трек с зелёным блоком — первый трек строки сетки. Вторая строка содержит три белых трека-блока.

В следующем примере мы используемgrid-template-columnsСвойство создаёт четыре столбца в контейнере сетки:

В следующем примере мы используемgrid-template-rowsСвойство задаёт высоту строк в контейнере сетки:

Единица fr

Треки можно задавать с использованием любой единицы длины.

Сетка вводитfrединицы, чтобы помочь нам создавать гибкие треки сетки. Одна единица fr представляет одну равную долю доступного пространства в контейнере сетки.

В следующем примере определяется сетка, которая создаст три трека равной ширины, растущих и сжимающихся в зависимости от доступного пространства.

Ячейка сетки

Ячейка сетки — это наименьшая единица внутри элемента сетки, концептуально похожая на ячейку в таблице. Теперь, возвращаясь к нашему предыдущему примеру, после того как элемент сетки определён внутри родительского элемента, его дочерние элементы будут располагаться в каждой предопределённой ячейке сетки. На изображении ниже я отмечу первую ячейку сетки.

Область сетки

Элементы сетки могут занимать одну или несколько ячеек в направлении строки или столбца и создавать область сетки. Форма области сетки должна быть прямоугольной — то есть нельзя создать область сетки в форме буквы "L". Выделенная область сетки на изображении ниже охватывает 2 столбца и 2 строки.

столбцы сетки

Вертикальное направление элементов сетки называется столбцом.

строка сетки

Горизонтальное направление элементов сетки называется строкой.

Промежуток сетки

Промежуток сетки (промежуток столбца) — это горизонтальное или вертикальное расстояние между двумя ячейками сетки.

Для настройки размера промежутка можно использовать следующие свойства:

• grid-column-gap
• grid-row-gap
• grid-gap

В следующем примере используется свойствоgrid-column-gapдля установки промежутка сетки между столбцами:

В следующем примере используется свойствоgrid-row-gapдля установки промежутка сетки между строками:

grid-gapСвойство является сокращением для свойств `grid-row-gap` и `grid-column-gap`:

grid-gapСвойство может задавать как промежуток между строками, так и промежуток между столбцами:

линия сетки

Пересечения между столбцами и между строками называются линиями сетки.

Grid создаёт пронумерованные линии сетки, чтобы мы могли позиционировать каждый элемент сетки.

Например, в приведённой ниже сетке с тремя столбцами и двумя строками есть четыре вертикальные линии сетки (отмеченные серыми кружками) и три горизонтальные линии сетки (отмеченные чёрными кружками).

Элементы сетки могут ссылаться на эти номера линий при позиционировании.

На изображении ниже заданы четыре вертикальные линии сетки и четыре горизонтальные линии сетки:

Порядок нумерации линий сетки зависит от режима письма документа. В языках, в которых письмо идёт слева направо, линия сетки номер 1 находится у самого левого края. В языках, в которых письмо идёт справа налево, линия сетки номер 1 находится у самого правого края.

Затем я использовал свойства `grid-column-start`, `grid-column-end`, `grid-row-start` и `grid-row-end`, чтобы продемонстрировать, как использовать линии сетки.

В следующем примере мы задаём линии сетки элемента сетки так, чтобы они начинались с первого столбца и заканчивались на третьем столбце:

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

Свойства CSS Grid

Далее мы можем использоватьCSS Grid Layout Mini-Game, чтобы проверить то, что мы изучили.