Свойства CSS Grid

CSS Grid - самая система компоновки из доступных на данный момент в CSS. Это двумерная система, которая может обрабатывать как колонки так и строки, в отличии от Flexbox, который в значительной степени является одномерной системой. При работе с CSS Grid, вы применяете CSS правила и родительским элементам (которые становятся Grid контейнерами) и к дочерним элементам (которые становятся Grid элементами).

Стили применяются для родительского блока, в котором лежат все остальные элементы

.grid { display: grid;
grid-template-rows: 100px 100px; - задается высота для ряда (первые 2 ряда по 100 пикс)
grid-auto-rows: 80px; - задается высота для всех последующих рядов
grid-column-gap: 20px; - задается отступ для колонок
grid-row-gap: 20px; - задается отступ для рядов
grid-row-gap: 20px; - задается отступ для колонок и рядов
grid-template-columns: 1fr 1fr 100px; - задается ширина для колонок (1 колонка 1 фракция, вторая - 1, третья 100пикс)
}

Особые положения

grid-auto-rows: minmax(100px, auto); - задается высота для всех рядов со значением минимума 100пикс а максимум по высоте контента
grid-template-columns: repeat (3, 1fr); - задается ширина для 3 колонок по 1 фракции
grid-template-columns: repeat (2, 1fr 2fr); - задается ширина для 1, 2 колонки 1 фракция, 2 для других
grid-template-columns: minmax(200px, 350px) 1fr 2fr; - ADAPTIVE - задается мин и макс ширина для первой колонки а 2 и третей по 1 фракции

Свойства для контейнера

display - определяет элемент как контейнер и устанавливает новый контекст форматирования сетки для его содержимого.

grid-template-columns / grid-template-rows - определяет колонки и строки сетки с помощью списка значений разделённого пробелами. Значения представляют из себя размер трека, а пробелы между ними представляют линии сетки.

grid-template-areas - определяет шаблон сетки ссылаясь на имена областей, которые заданы с помощью свойства grid-area. Повторение названия области приводит к тому, что содержимое охватывает эти ячейки. Точка означает пустую ячейку. Сам синтаксис предоставляет визуализацию структуры сетки.

grid-template - сокращение для grid-template-rows, grid-template-columns, и grid-template-areas.

grid-column-gap / grid-row-gap -  определяет размер ширины линий. Вы можете думать об этом, как о настройке ширины отступов между столбцами и строками.

grid-gap - сокращение для grid-row-gap и grid-column-gap.

justify-items - выравнивает содержимое вдоль оси строки (в отличии от align-items который выравнивает элементы вдоль оси столбца). Это значение применяется ко всем элементам сетки внутри контейнера.

align-items - выравнивает содержимое вдоль оси столбца (в отличии от justify-items который выравнивает элементы вдоль оси строки). Это значение применяется ко всем элементам сетки внутри контейнера.

justify-content - иногда общий размер сетки может быть меньше размера контейнера. Такое может случится если у всех элементов сетки заданы фиксированные единицы измерения, например px. В таком случае можно установить выравнивание сетки внутри контейнера. Это свойство выравнивает сетку вдоль оси строки (в отличии от свойства align-content, которое выравнивает сетку вдоль оси столбца).

align-content - иногда общий размер сетки может быть меньше размера контейнера. Такое может случится если у всех элементов сетки зада фиксированные единицы измерения, например px. В таком случае можно установить выравнивание сетки внутри контейнера. Это свойство выравнивает сетку вдоль оси колонки (в отличии от свойства justify-content, которое выравнивает сетку вдоль оси строки).

grid-auto-columns / grid-auto-rows - определяет размер любых автоматически созданных треков (иначе говоря, неявных треков). Неявные треки создаются при явном позиционировании столбцов и строк (через grid-template-rows/grid-template-columns), которые находятся за пределами заданной сетки.

grid-auto-flow - если у вас есть элементы, которые вы явно не позиционируете в сетке, запускается алгоритм авто-размещения, чтобы их автоматически разместить. Это свойство контролирует то как алгоритм авто-размещения работает.

grid - сокращение для настройки всех следующих свойств: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, и grid-auto-flow. Он также настраивает grid-column-gap и grid-row-gap на их начальные значения, даже если они не могут быть явно заданы этим свойством.

Свойства для элементов

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

grid-column / grid-row  - сокращение для grid-column-start + grid-column-end, и grid-row-start + grid-row-end, соответственно.

grid-area - даёт название элементу чтобы можно было ссылаться на него с помощью шаблона созданного через grid-template-areas свойство. В качестве альтернативы, это свойство может быть использовано в качестве сокращения для grid-row-start + grid-column-start + grid-row-end + grid-column-end.

justify-self - выравнивает содержимое элемента вдоль оси строки (в отличии от align-self, который выравнивает вдоль оси столбца). Это значение применяется к содержимому внутри отдельного элемента.

align-self - Выравнивает содержимое элемента вдоль оси столбца (в отличии от justify-self, который выравнивает вдоль оси строки). Это значение применяется к содержимому внутри отдельного элемента.