Чтобы сделать элемент грид-контейнером, нужно задать ему соответствующее значение свойства display:

.container {
  display: grid;
}

В гриде элементы располагаются по двумерной сетке. То есть грид состоит из рядов и столбцов, располагающихся между линий, которые нумеруются по порядку. Одно «деление» грида называют ячейкой.

Чтобы расположить элемент по сетке внутри грида, нужно задать ему координаты по столбцам и по рядам: с какой линии столбцов и рядов грид-область будет начинаться, на какой линии столбцов и рядов будет заканчиваться. Координаты грид-области на иллюстрации выше в коде описываются так:

/*
Область
начинается с 4 линии столбцов,
заканчивается на 5 линии столбцов,
начинается на 3 линии рядов,
заканчивается на 4 линии рядов.
*/

.element {
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 3;
  grid-row-end: 4;
}

Координаты можно отсчитывать не только от начала, но и от конца грида. При этом к индексу линии, от которой ведётся отсчёт, добавляет знак «минус». Координаты той же грид-области можно описать следующим образом:

/*
Область
начинается со 2 линии столбцов с конца грида,
заканчивается на 1 линии столбцов с конца грида,
начинается на 3 линии рядов с конца грида,
заканчивается на 2 линии рядов с конца грида.
*/

.element {
  grid-column-start: -2;
  grid-column-end: -1;
  grid-row-start: -3;
  grid-row-end: -2;
}

Существует также сокращённый синтаксис для этих свойств. Свойство grid-column объединяет в себе сразу два свойства: grid-column-start/grid-column-end.

Пример:

grid-column: 1 / 3;

/* Это то же самое, что: */

grid-column-start: 1;
grid-column-end: 3;

Аналогично, свойство grid-row — это сокращение для задания пары свойств: grid-row-start/grid-row-end.

Пример:

grid-row: 1 / -2;

/* Это то же самое, что: */

grid-row-start: 1;
grid-row-end: -2;

Если в свойстве grid-row или grid-column не задать второй параметр, то значение останется валидным, но применится только первый параметр.

Грид-элементы могут наслаиваться друг на друга, при этом они начинают себя вести как будто абсолютно спозиционированные, при этом на них так же действует свойство z-index. Чем больше значение z-index, тем выше грид-элемент в «стопке».