Шпаргалка по Grid CSS

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

Для быстрого изучения темы рекомендуем пройти 11-ти дневный марафон Grid CSS

 

display

• grid
• inline-grid
• subgrid

Здесь текст

.parent {
  display: grid;
}

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

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

grid

формирует сетку как блок.

inline-grid

формирует сетку как строчный блок.

subgrid

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

justify-items

• start
• end
• center
• stretch

.parent {
  display: grid;
  justify-items: start;
}

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

Наследуется: нет.

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

Значение по умолчанию: legacy.

start

выравнивает содержимое по левой стороне области.

end

выравнивает содержимое по правой стороне области.

center

выравнивает содержимое по центру области.

stretch

заполняет всю ширину области (по умолчанию).

align-items

• start
• end
• center
• stretch

.parent {
  display: grid;
  align-items: start;
}

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

Наследуется: нет.

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

Значение по умолчанию: normal.

start

выравнивание элементов по верхней части области.

end

выравнивание элементов по нижней части области.

center

выравнивание элементов по центру области.

stretch

заполняет всю высоту области (по умолчанию).

justify-content

• start
• end
• center
• stretch
• space-between
• space-around
• space-evenly

.parent {
  display: grid;
  justify-content: start;
}

Это свойство выравнивает сетку вдоль оси строки (в отличии от свойства align-content, которое выравнивает сетку вдоль оси столбца)

Наследуется: нет.

Применяется к: block контейнерам, flex контейнерам и grid контейнерам.

Значение по умолчанию: normal.

start

выравнивает сетку по левой стороне контейнера.

end

выравнивает сетку по правой стороне контейнера.

center

выравнивает сетку по центру контейнера.

stretch

масштабирует элементы чтобы сетка могла заполнить всю ширину контейнера.

space-around

одинаковое пространство между элементами, и полуразмерные отступы по краям.

space-between

одинаковое пространство между элементами, без отступов по краям.

space-evenly

одинаковое пространство между элементами, и полноразмерные отступы по краям.

align-content

• start
• end
• center
• stretch
• space-around
• space-between
• space-evenly

.parent {
  display: grid;
  align-content: start;
}

Это свойство выравнивает сетку вдоль оси колонки (в отличии от свойства justify-content, которое выравнивает сетку вдоль оси строки).

Наследуется: нет.

Применяется к: block контейнерам, flex контейнерам и grid контейнерам.

Значение по умолчанию: normal.

start

выравнивает сетку по верхней части контейнера.

end

выравнивает сетку по нижней части контейнера.

center

масштабирует элементы чтобы сетка могла заполнить всю высоту контейнера.

space-around

одинаковое пространство между элементами, и полуразмерные отступы по краям.

space-between

одинаковое пространство между элементами, без отступов по краям.

space-evenly

одинаковое пространство между элементами, и полноразмерные отступы по краям.

grid-auto-flow

• row
• column
• dense

.parent {
  display: grid;
  grid-auto-flow: column;
}

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

Наследуется: нет.

Применяется к: grid контейнерам.

Значение по умолчанию: row.

row

Алгоритм размещает элементы, заполняя каждую строку поочередно, добавляя новые строки по мере необходимости.

column

Алгоритм помещает элементы, заполняя каждый столбец поочередно, добавляя по мере необходимости новые столбцы.

dense

алгоритм использует «плотный» алгоритм упаковки, который пытается заполнить дыры в сетке, если позже появятся более мелкие элементы. Это может привести к тому, что элементы появятся не по порядку, но при этом заполнят отверстия, оставленные более крупными элементами.

justify-self

• start
• end
• center
• stretch

.parent {
  display: grid;
}
.child {
  justify-self: start;
}

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

Наследуется: нет.

Применяется к: содержимому внутри отдельного элемента.

Значение по умолчанию: auto.

start

Выравнивает содержимое по левой части области.

end

Выравнивает содержимое по правой части области.

center

Выравнивает содержимое по центру области.

stretch

Заполняет всю ширину области (по умолчанию).

align-self

• start
• end
• center
• stretch

.parent {
  display: grid;
}
.child {
  align-self: start;
}

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

Наследуется: нет.

Применяется к: содержимому внутри отдельного элемента.

Значение по умолчанию: auto.

start

Выравнивает содержимое по верхней части области.

end

Выравнивает содержимое по нижней части области.

center

Выравнивает содержимое по центру области.

stretch

Заполняет всю высоту области (по умолчанию).