Мы добавили в список новую карточку, содержимое которой не помещается в одну колонку. Дизайнер настаивает, что уменьшать текст и картинку нельзя. Как быть? Разрешим карточке занять две колонки.

Сделать это можно с помощью свойства grid-column:

.element {
  grid-column: span 2;
}

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

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

// Этот элемент растянется на три колонки
.wide-element {
  grid-column: span 3;
}

// А этот – на четыре
.very-wide-element {
  grid-column: span 4;
}

Нам нужно, чтобы карточка в списке заняла две колонки. Добавим ей дополнительный класс и используем свойство grid-column, чтобы растянуть её. Поэкспериментируем с разными значениями span и разной шириной страницы.