Вся документация по свойству grid находится на официальном сайте.

Рекомендуем пройти мастер-класс 7 мая 2022 по теме Grid

 

display

Здесь текст

.parent {
  display: grid;
}Copied!

Здесь текст

.parent {
  display: inline-grid;
}Copied!

Здесь текст

.parent {
  display: subgrid;
}Copied!

Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.

Применяется ко: всем элементам.

grid
формирует сетку как блок.
inline-grid
формирует сетку как строчный блок.
subgrid
если ваш контейнер это ещё и элемент (вложенная сетка), то вы можете использовать это свойство для обозначения того, чтобы размеры строк/колонок были взяты из родительского элемента, а не определяли собственный.

grid-template-columns

.parent {
  display: grid;
  grid-template-columns: 100px 50px 100px;
}


Copied!

.parent {
  display: grid;
  grid-template-columns: 50px 1fr 50px;
}


Copied!

.parent {
  display: grid;
  grid-template-columns: repeat(3, 80px)
}


Copied!

CSS-свойство grid-template-columns определяет имена линий и размеры grid-колонок.

Применяется ко: всем элементам.

grid-template-rows

.parent {
  display: grid;
  grid-template-rows: 80px 50px 80px;
}


Copied!

.parent {
  display: grid;
  grid-template-rows: 50px 1fr 50px;
}


Copied!

.parent {
  display: grid;
  grid-template-rows: repeat(3, 60px)
}


Copied!

CSS-свойство grid-template-rows определяет имена линий и размеры полос grid-рядов.

Применяется ко: всем элементам.

grid-template-areas

.parent {
  display: grid;
  grid-template-areas: "a a a" "b c c" "b c c";
}


Copied!

.parent {
  display: grid;
  grid-template-areas: "b b a" "b b c" "b b c"
}


Copied!

.parent {
  display: grid;
  grid-template-areas: "a a ." ". b b" "c c .";
}


Copied!

CSS-свойство grid-template-areas создаёт grid-области путём размещения именованных ячеек в грид-раскладке.

Применяется ко: всем элементам.

gap

.parent {
  display: grid;
  gap: 5px;
}


Copied!

.parent {
  display: grid;
  gap: 5px 20px;
}


Copied!

.parent {
  display: grid;
  gap: 5%;
}


Copied!

.parent {
  display: grid;
  gap: 1em;
}


Copied!

.parent {
  display: grid;
  gap: calc(5% + 5px);
}


Copied!

.parent {
  display: grid;
  gap: normal;
}


Copied!

Свойство gap CSS задаёт отступы между столбцами и строками, а не вдоль края контейнера сетки. Является сокращением для свойств row-gap и column-gap.

Применяется ко: всем элементам.

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
Заполняет всю высоту области (по умолчанию).