Мы заставили карточку растянуться на несколько колонок. Дизайнеру идея понравилась, и он решил ни в чём себя не ограничивать. Так в списке появилась карточка, которой требуется две колонки и два ряда. Она уже добавлена в разметку, осталось только написать правильные стили.

Растянуть элемент на несколько рядов можно с помощью свойства grid-row. Ключевое слово span в нём работает так же, как в grid-column, только означает не количество колонок, которые элемент должен занять, а количество рядов:

.long-element {
  grid-row: span 2;
}

Элемент из примера растянется на два ряда:

Свойства grid-column и grid-row можно использовать одновременно. Например, такой код заставит элемент занять три колонки и два ряда:

.element {
  grid-column: span 3;
  grid-row: span 2;
}

Карточка, которая в два раза шире и выше других, имеет класс huge. Скажем ей растянуться на два ряда и две колонки.