CSS Grid свойства контейнера

CSS Grid - это способ расположения элементов на странице, в отличии от Flex, у которого только одна главная ось, в Grid мы можем управлять сразу двумя осями главной и поперечной. Сегодня у Grid хорошая поддержка браузерами, так что его можно использовать.

Свойство display

Контейнер-сетка бывает двух видов: обычный display: grid и display: inline-grid. Первый генерирует блочный grid-контейнер, второй — строчный.

Определение явной сетки

Свойства: grid-template-rows, grid-template-columns, grid-template, grid-template-areas

Количество строк / столбцов определяется с помощью свойств grid-template-rows и grid-template-columns. Свойства не наследуются.

.block{
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  grid-template-rows: 100px 50px;
}

Каждый идентификатор сетки в значении grid-template-areas соответствует ячейке сетки. Как только все ячейки идентифицированы, браузер объединяет все смежные ячейки с одинаковыми именами в одну область, которая охватывает все их, при условии, что они описывают область прямоугольной формы. Если вы попытаетесь настроить более сложные области, весь шаблон будет недействительным и области сетки не будут определены.

Определение неявной сетки

Свойства: grid-auto-columns, grid-auto-rows, grid-auto-flow

Если элемент сетки расположен в строке или столбце, размер которых не определен явно grid-template-rows или grid-template-columns, создаются неявные дорожки сетки для его хранения. Это может произойти в случае, если строка или столбец оказались за пределами установленных размеров сетки.

Элементы сетки, которые не размещены явно, автоматически помещаются в незанятое пространство в контейнере-сетке с помощью алгоритма автоматического размещения. Свойство grid-auto-flow управляет автоматическим размещением элементов сетки без явного положения. После заполнения явной сетки (или если явной сетки нет) автоматическое размещение также приведет к генерации неявных дорожек сетки. Свойство не наследуется. Значения:

row - алгоритм размещает элементы, заполняя каждую строку поочередно, добавляя новые строки по мере необходимости.

column - алгоритм помещает элементы, заполняя каждый столбец поочередно, добавляя по мере необходимости новые столбцы.

dense - алгоритм использует «плотный» алгоритм упаковки, который пытается заполнить дыры в сетке, если позже появятся более мелкие элементы. Это может привести к тому, что элементы появятся не по порядку, но при этом заполнят отверстия, оставленные более крупными элементами.

Выравнивание содержимого вдоль горизонтальной оси

Свойство: justify-items

Выравнивает содержимое вдоль оси строки (в отличии от align-items который выравнивает элементы вдоль вертикальной оси). Это значение применяется ко всем элементам сетки внутри контейнера. Свойство не наследуются. Значения:

stretch - заполняет всю ширину области (по умолчанию).

start - выравнивает содержимое по левой стороне области.

end - выравнивает содержимое по правой стороне области.

center - выравнивает содержимое по центру области.

Выравнивание содержимого вдоль вертикальной оси

Свойство: align-items

Выравнивает содержимое вдоль вертикальной оси (в отличии от justify-items который выравнивает элементы вдоль горизонтальной оси). Это значение применяется ко всем элементам сетки внутри контейнера. Свойство не наследуются. Значения:

stretch - заполняет всю высоту области (по умолчанию).

start - выравнивание элементов по верхней части области.

end - выравнивание элементов по нижней части области.

center - выравнивание элементов по центру области.

Выравнивание сетки вдоль горизонтальной оси

Свойство: justify-content

Выравнивает сетку вдоль горизонтальной оси (в отличии от align-content который выравнивает сетку вдоль вертикальной оси). Свойство не наследуются. Значения:

start - выравнивает сетку по левой стороне контейнера.

end - выравнивает сетку по правой стороне контейнера.

center - выравнивает сетку по центру контейнера.

stretch - масштабирует элементы чтобы сетка могла заполнить всю ширину контейнера.

space-around - одинаковое пространство между элементами, и полуразмерные отступы по краям.

space-between - одинаковое пространство между элементами, без отступов по краям.

space-evenly - одинаковое пространство между элементами, и полноразмерные отступы по краям.

Выравнивание сетки вдоль вертикальной оси

Свойство: align-content

Выравнивает сетку вдоль вертикальной оси (в отличии от justify-content которое выравнивает сетку вдоль горизонтальной оси). Свойство не наследуются. Значения:

start - выравнивает сетку по верхней части контейнера.

end - выравнивает сетку по нижней части контейнера.

center - масштабирует элементы чтобы сетка могла заполнить всю высоту контейнера.