Как разместить один элемент в строке адаптивной сетки? ⇐ CSS

[Anonymous]

Я использую сетку для размещения карточек. Сетка адаптивна с использованием минимакса и автоматической подгонки:

Код: Выделить всё

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

Но мне бы хотелось, чтобы в первом ряду была одна карточка, чтобы она не охватывала (т. е. имела ту же ширину, что и карточки в следующих строках).
Итак, вот желаемые макеты для 1-3 столбцов (в зависимости от ширины экрана), где x означает «карточка», а . означает «пустое место»:

Код: Выделить всё

x
x
x

x .
x x
x x

x . .
x x x
x x x
x x x

Я пробовал указать строку сетки для второй карточки и далее, но поскольку я заранее не знаю, сколько столбцов там будет (шаблон адаптивной сетки), я не знаю. знаю.
Мне понадобится такое свойство, как min-grid-row.
РЕДАКТИРОВАТЬ:

• Я не могу разместить первый элемент за пределами сетки, поскольку хочу, чтобы все карточки имели одинаковую ширину (адаптивные)

Подробнее здесь: https://stackoverflow.com/questions/787 ... e-grid-row