Несколько ячеек сразу

Мейн-кун — одна из самых крупных пород кошек, так что дадим ему и карточку побольше: шириной в два столбца и высотой в две строки.

Элемент может занимать больше одной ячейки. Свойством grid-column мы указываем, какие столбцы он занимает, а свойством grid-row — какие строки. Проще всего написать слово span и число:

.large {
	grid-column: span 2;
}

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

Можно также точно указать, где элемент начинается и где заканчивается, номерами линий сетки. Линии нумеруются с 1: у сетки из трёх столбцов четыре вертикальные линии, от левого края до правого (см. картинку). Значение — это два числа через косую черту: линия, где элемент начинается, и линия, где он заканчивается.

.large {
	grid-column: 1 / 3;
}

Этот элемент лежит между линиями 1 и 3, то есть занимает первый и второй столбцы. Запись grid-column: 1 / -1 растягивает элемент на всю ширину сетки: отрицательные числа отсчитывают линии с конца, так что -1 — это последняя линия.

Свойство grid-row работает так же, только для строк.