display
Назначение: формирует сетку как блок
Возможные значения: grid / inline-grid
display:grid
Текст1
2
3
4
5
6
7
8
9
display:inline-grid
Текст1
2
3
4
5
6
7
8
9
grid-template-columns
Назначение: определяет имена линий и размеры grid-колонок.
Возможные значения: px, %, minmax, repeat, fr, auto
grid-template-columns:100px 50px 100px
1
2
3
4
5
6
7
8
9
grid-template-columns:20% 40% 20%
Размеры в % вычисляются от ширины или высоты контейнера-сетки.1
2
3
4
5
6
7
8
9
grid-template-columns: minmax(100px,200px) minmax(50px,100px) minmax(150px,50px);
Функция minmax(min,max) определяет диапазон размеров, больше или равный min и меньше или равный max. Если max < min, то max игнорируется, а minmax(min,max) обрабатывается как min. Значения в fr можно устанавливать только как максимальное.1
2
3
4
5
6
7
8
9
grid-template-columns:repeat(3, 80px)
Нотация repeat() представляет повторяющийся фрагмент списка дорожек, что позволяет записать в более компактной форме большое количество одинаковых по размерам столбцов или строк.1
2
3
4
5
6
7
8
9
grid-template-columns:50px 1fr 50px
fr — единица длины, которая позволяет создавать гибкие дорожки. Не является единицей измерения в обычном ее понимании, поэтому не может быть представлена или объединена с другими типами единиц в выражениях calc(). Общий размер фиксированных строк или столбцов вычитается из доступного пространства контейнера-сетки. Оставшееся пространство делится между строками и столбцами с гибкими размерами пропорционально их коэффициенту.1
2
3
4
5
6
7
8
9
grid-template-rows
Назначение: определяет имена линий и размеры полос grid-рядов
Возможные значения:
grid-template-rows:100px 50px 100px
1
2
3
4
5
6
7
8
9
grid-template-rows:repeat(3, 80px)
3 по 80 px1
2
3
4
5
6
7
8
9
grid-template-rows:50px 1fr 50px
50px, растянуть, 50px1
2
3
4
5
6
7
8
9
grid-template
Назначение: Позволяет разом указать три свойства: grid-template-rows, grid-template-columns и grid-template-areas.
Возможные значения: px, %, em, fr, calc, auto
grid-template:60px 50px 60px / 100px 50px 100px;
1
2
3
4
5
6
7
8
9
grid-template:repeat(3, 60px) / repeat(3, 80px)
3 по 60 px по вертикали и 3 по 80 по горизонтали1
2
3
4
5
6
7
8
9
grid-template:"a a a" 50px "b c d" 100px "e e e" 50px / 100px auto 100px;
a
b
c
d
e
grid-template-areas
Назначение: создаёт grid-области путём размещения именованных ячеек в грид-раскладке
Возможные значения:
grid-template-areas: "a a a" "b c c" "d e f"
a
b
c
d
e
f
grid-template-areas: "b b a" "b b c" "d e f"
a
b
c
d
e
f
grid-template-areas: "a a ." ". b b" "c c ."
1
2
3
gap
Назначение: задаёт отступы между столбцами и строками, а не вдоль края контейнера сетки. Является сокращением для свойств row-gap и column-gap
Возможные значения: 5px, 1%, 1em, calc(5% +5px)
Значение по умолчанию: normal (нет отступа)
gap: 5px
Отступы по горизонтали и по вертикали 5px1
2
3
4
5
6
7
8
9
gap: 5px 20px
Отступы по вертикали 5px и по горизонтали 20px1
2
3
4
5
6
7
8
9
gap: 1em
отступы 1em1
2
3
4
5
6
7
8
9
justify-items
Назначение: Выравнивает содержимое вдоль оси строки (в отличии от align-items который выравнивает элементы вдоль оси столбца). Это значение применяется ко всем элементам сетки внутри контейнера
Возможные значения: start / end / center / stretch
Значение по умолчанию: stretch
justify-items: start
выравнивает содержимое по левой стороне области1
2
3
4
5
6
7
8
9
justify-items: end
выравнивает содержимое по правой стороне области1
2
3
4
5
6
7
8
9
justify-items: center
выравнивает содержимое по центру области1
2
3
4
5
6
7
8
9
justify-items: stretch
заполняет всю ширину области (по умолчанию)1
2
3
4
5
6
7
8
9
align-items
Назначение: Выравнивает содержимое вдоль оси столбца (в отличии от justify-items который выравнивает элементы вдоль оси строки). Это значение применяется ко всем элементам сетки внутри контейнера
Возможные значения: start / end / center / stretch
Значение по умолчанию: stretch
align-items: start
выравнивание элементов по верхней части области1
2
3
4
5
6
7
8
9
align-items: end
выравнивание элементов по нижней части области1
2
3
4
5
6
7
8
9
align-items: center
выравнивание элементов по центру области1
2
3
4
5
6
7
8
9
align-items: stretch
заполняет всю высоту области (по умолчанию)1
2
3
4
5
6
7
8
9
justify-content
Назначение: Выравнивает содержимое вдоль оси столбца (в отличии от justify-items который выравнивает элементы вдоль оси строки). Это значение применяется ко всем элементам сетки внутри контейнера
Возможные значения: start / end / center / stretch / space-between / space-around / space-evenly
Значение по умолчанию: start
justify-content: start;
выравнивает сетку по левой стороне контейнера1
2
3
4
5
6
7
8
9
justify-content: end
выравнивает сетку по правой стороне контейнера1
2
3
4
5
6
7
8
9
justify-content: center
выравнивает сетку по центру контейнера1
2
3
4
5
6
7
8
9
justify-content: stretch
масштабирует элементы чтобы сетка могла заполнить всю ширину контейнера1
2
3
4
5
6
7
8
9
justify-content: space-between
одинаковое пространство между элементами, без отступов по краям1
2
3
4
5
6
7
8
9
justify-content: space-around
одинаковое пространство между элементами, и полуразмерные отступы по краям1
2
3
4
5
6
7
8
9
justify-content: space-evenly
одинаковое пространство между элементами, и полноразмерные отступы по краям1
2
3
4
5
6
7
8
9
align-content
Назначение: выравнивает сетку вдоль оси колонки (в отличии от свойства justify-content, которое выравнивает сетку вдоль оси строки)
Возможные значения: start / end / center / stretch / space-between / space-around / space-evenly
Значение по умолчанию: start
align-content: start;
выравнивает сетку по верхней части контейнера1
2
3
4
5
6
7
8
9
align-content: end
выравнивает сетку по нижней части контейнера1
2
3
4
5
6
7
8
9
align-content: center
выравнивает сетку по центру контейнера1
2
3
4
5
6
7
8
9
align-content: stretch
масштабирует элементы чтобы сетка могла заполнить всю высоту контейнера1
2
3
4
5
6
7
8
9
align-content: space-between
одинаковое пространство между элементами, без отступов по краям1
2
3
4
5
6
7
8
9
align-content: space-around
одинаковое пространство между элементами, и полноразмерные отступы по краям1
2
3
4
5
6
7
8
9
align-content: space-evenly
заполняет всю высоту области (по умолчанию)1
2
3
4
5
6
7
8
9
grid-auto-flow
Назначение: определяет имена линий и размеры grid-колонок.
Возможные значения:
grid-auto-flow: row
Алгоритм размещает элементы, заполняя каждую строку поочередно, добавляя новые строки по мере необходимости1
2
3
4
5
6
7
8
9
grid-auto-flow: column
Алгоритм помещает элементы, заполняя каждый столбец поочередно, добавляя по мере необходимости новые столбцы1
2
3
4
5
6
7
8
9
grid-auto-flow: dense;
алгоритм использует «плотный» алгоритм упаковки, который пытается заполнить дыры в сетке, если позже появятся более мелкие элементы. Это может привести к тому, что элементы появятся не по порядку, но при этом заполнят отверстия, оставленные более крупными элементами.1
2
3
4
5
6
7
8
9
justify-self
Назначение: Выравнивает содержимое элемента вдоль оси строки (в отличии от align-self, который выравнивает вдоль оси столбца).
Возможные значения: start / end / center / stretch
Значение по умолчанию: stretch
Применяется к: содержимому внутри отдельного элемента.
justify-self: start
Выравнивает содержимое по левой части области.1
2
3
4
5
6
7
8
9
justify-self: end
Выравнивает содержимое по правой части области.1
2
3
4
5
6
7
8
9
justify-self: center
Выравнивает содержимое по центру области.1
2
3
4
5
6
7
8
9
justify-self: stretch
Заполняет всю ширину области (по умолчанию).1
2
3
4
5
6
7
8
9
align-self
Назначение: Выравнивает содержимое элемента вдоль оси столбца (в отличии от justify-self, который выравнивает вдоль оси строки).
Возможные значения: start / end / center / stretch
Значение по умолчанию: stretch
Применяется к: содержимому внутри отдельного элемента.
align-self: start
Выравнивает содержимое по верхней части области.1
2
3
4
5
6
7
8
9
align-self: end
Выравнивает содержимое по нижней части области.1
2
3
4
5
6
7
8
9
align-self: center
Выравнивает содержимое по центру области.1
2
3
4
5
6
7
8
9
align-self: stretch
Заполняет всю высоту области (по умолчанию).1
2
3
4
5
6
7
8
9