Вся документация по свойству grid находится на официальном сайте.
Для быстрого изучения темы рекомендуем пройти 11-ти дневный марафон Grid CSS
display
.parent {
display: grid;
}Copied!.parent {
display: inline-grid;
}Copied!.parent {
display: subgrid;
}Copied!Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.
Применяется ко: всем элементам.
- grid
- формирует сетку как блок.
- inline-grid
- формирует сетку как строчный блок.
- subgrid
- если ваш контейнер это ещё и элемент (вложенная сетка), то вы можете использовать это свойство для обозначения того, чтобы размеры строк/колонок были взяты из родительского элемента, а не определяли собственный.
justify-items
.parent {
display: grid;
justify-items: start;
}Copied!.parent {
display: grid;
justify-items: end;
}Copied!.parent {
display: grid;
justify-items: center;
}Copied!.parent {
display: grid;
justify-items: stretch;
}Copied!Выравнивает содержимое вдоль оси строки (в отличии от align-items который выравнивает элементы вдоль оси столбца). Это значение применяется ко всем элементам сетки внутри контейнера.
Наследуется: нет.
Применяется ко: всем элементам.
Значение по умолчанию: legacy.
- start
- выравнивает содержимое по левой стороне области.
- end
- выравнивает содержимое по правой стороне области.
- center
- выравнивает содержимое по центру области.
- stretch
- заполняет всю ширину области (по умолчанию).
align-items
.parent {
display: grid;
align-items: start;
}Copied!.parent {
display: grid;
align-items: end;
}Copied!.parent {
display: grid;
align-items: center;
}Copied!.parent {
display: grid;
align-items: stretch;
}Copied!Выравнивает содержимое вдоль оси столбца (в отличии от justify-items который выравнивает элементы вдоль оси строки). Это значение применяется ко всем элементам сетки внутри контейнера.
Наследуется: нет.
Применяется ко: всем элементам.
Значение по умолчанию: normal.
- start
- выравнивание элементов по верхней части области.
- end
- выравнивание элементов по нижней части области.
- center
- выравнивание элементов по центру области.
- stretch
- заполняет всю высоту области (по умолчанию).
justify-content
.parent {
display: grid;
justify-content: start;
}Copied!.parent {
display: grid;
justify-content: end;
}Copied!.parent {
display: grid;
justify-content: center;
}Copied!.parent {
display: grid;
justify-content: stretch;
}Copied!.parent {
display: grid;
justify-content: space-between;
}Copied!.parent {
display: grid;
justify-content: space-around;
}Copied!.parent {
display: grid;
justify-content: space-evenly;
}Copied!Это свойство выравнивает сетку вдоль оси строки (в отличии от свойства align-content, которое выравнивает сетку вдоль оси столбца)
Наследуется: нет.
Применяется к: block контейнерам, flex контейнерам и grid контейнерам.
Значение по умолчанию: normal.
- start
- выравнивает сетку по левой стороне контейнера.
- end
- выравнивает сетку по правой стороне контейнера.
- center
- выравнивает сетку по центру контейнера.
- stretch
- масштабирует элементы чтобы сетка могла заполнить всю ширину контейнера.
- space-around
- одинаковое пространство между элементами, и полуразмерные отступы по краям.
- space-between
- одинаковое пространство между элементами, без отступов по краям.
- space-evenly
- одинаковое пространство между элементами, и полноразмерные отступы по краям.
align-content
.parent {
display: grid;
align-content: start;
}Copied!.parent {
display: grid;
align-content: end;
}Copied!.parent {
display: grid;
align-content: center;
}Copied!.parent {
display: grid;
align-content: stretch;
}Copied!.parent {
display: grid;
align-content: space-around;
}Copied!.parent {
display: grid;
align-content: space-between;
}Copied!.parent {
display: grid;
align-content: space-evenly;
}Copied!Это свойство выравнивает сетку вдоль оси колонки (в отличии от свойства justify-content, которое выравнивает сетку вдоль оси строки).
Наследуется: нет.
Применяется к: block контейнерам, flex контейнерам и grid контейнерам.
Значение по умолчанию: normal.
- start
- выравнивает сетку по верхней части контейнера.
- end
- выравнивает сетку по нижней части контейнера.
- center
- масштабирует элементы чтобы сетка могла заполнить всю высоту контейнера.
- space-around
- одинаковое пространство между элементами, и полуразмерные отступы по краям.
- space-between
- одинаковое пространство между элементами, без отступов по краям.
- space-evenly
- одинаковое пространство между элементами, и полноразмерные отступы по краям.
grid-auto-flow
.parent {
display: grid;
grid-auto-flow: column;
}Copied!.parent {
display: grid;
grid-auto-flow: column;
}Copied!.parent {
display: grid;
grid-auto-flow: dense;
}Copied!Свойство grid-auto-flow управляет тем, как работает алгоритм автоматического размещения, точно указывая, как элементы попадают в сетку.
Наследуется: нет.
Применяется к: grid контейнерам.
Значение по умолчанию: row.
- row
- Алгоритм размещает элементы, заполняя каждую строку поочередно, добавляя новые строки по мере необходимости.
- column
- Алгоритм помещает элементы, заполняя каждый столбец поочередно, добавляя по мере необходимости новые столбцы.
- dense
- алгоритм использует «плотный» алгоритм упаковки, который пытается заполнить дыры в сетке, если позже появятся более мелкие элементы. Это может привести к тому, что элементы появятся не по порядку, но при этом заполнят отверстия, оставленные более крупными элементами.
justify-self
.parent {
display: grid;
}
.child {
justify-self: start;
}Copied!.parent {
display: grid;
}
.child {
justify-self: end;
}Copied!.parent {
display: grid;
}
.child {
justify-self: center;
}Copied!.parent {
display: grid;
}
.child {
justify-self: stretch;
}Copied!.parent {
display: grid;
flex-wrap: wrap;
align-content: space-around;
height: 100%;
}
.child {
width: 30%;
}Copied!.parent {
display: grid;
flex-wrap: wrap;
align-content: space-evenly;
height: 100%;
}
.child {
width: 30%;
}Copied!.parent {
display: grid;
flex-wrap: wrap;
align-content: stretch;
height: 100%;
}
.child {
width: 30%;
}Copied!Выравнивает содержимое элемента вдоль оси строки (в отличии от align-self, который выравнивает вдоль оси столбца).
Наследуется: нет.
Применяется к: содержимому внутри отдельного элемента.
Значение по умолчанию: auto.
- start
- Выравнивает содержимое по левой части области.
- end
- Выравнивает содержимое по правой части области.
- center
- Выравнивает содержимое по центру области.
- stretch
- Заполняет всю ширину области (по умолчанию).
align-self
.parent {
display: grid;
}
.child {
align-self: start;
}Copied!.parent {
display: grid;
}
.child {
align-self: end;
}Copied!.parent {
display: grid;
}
.child {
align-self: center;
}Copied!.parent {
display: grid;
}
.child {
align-self: stretch;
}Copied!Выравнивает содержимое элемента вдоль оси столбца (в отличии от justify-self, который выравнивает вдоль оси строки).
Наследуется: нет.
Применяется к: содержимому внутри отдельного элемента.
Значение по умолчанию: auto.
- start
- Выравнивает содержимое по верхней части области.
- end
- Выравнивает содержимое по нижней части области.
- center
- Выравнивает содержимое по центру области.
- stretch
- Заполняет всю высоту области (по умолчанию).