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, который выравнивает вдоль оси строки). Это значение применяется к содержимому внутри отдельного элемента.
Антон @pfilan