CSS Grid свойства элементов

Свойство: gap (для grid контейнера)

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

Row-gap задает отступ только между строками, а column-gap между колонками.

Свойство: justify-self

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

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

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

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

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

.block__element{
  justify-self: start;
}

Свойство: align-self

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

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

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

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

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

Свойства: grid-column и grid-row

grid-column и grid-row — это сокращение для свойств: grid-column-start/grid-column-end и grid-row-start / grid-row-end. Можно указать только первое (одно) значение, оно будет относиться к начальной линии и элемент будет растягиваться на 1 ряд/колонку (т.е. будет помещен в одну ячейку начальная линия которой указана).

// синтаксис:
grid-row-start: значение;      // где начинается линия ряда
grid-row-end:   значение;      // где кончается линия ряда

grid-column-start: значение;   // где начинается линия колонки
grid-column-end:   значение;   // где кончается линия колонки

grid-row:    grid-row-start    / grid-row-end;
grid-column: grid-column-start / grid-column-end;

// можно указать одно значение, второе значение будет span 1
grid-row:    grid-row-start;
grid-column: grid-column-start;

Значение может быть:

• число/имя — порядковый номер или имя линии к которой нужно прикрепить текущий элемент.
• span число — слово span значит растянуть. Текущий элемент будет растягиваться на указанное число рядов/колонок. Если указано слово span, то относится всегда ко второму значению.
• span имя — слово span значит растянуть. Текущий элемент будет растягиваться до указанного названия линии ряда/колонки. Если указано слово span, то относится всегда ко второму значению.
• auto — элемент размещается по указанному алгоритму в свойстве контейнера grid-auto-flow:.

Подробная статья про Grid

Полное руководство и справочник

Игра-тренажер Grid Garden