I am using a grid to place cards. The grid is responsive using minimax and auto-fit:

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

But, I would like to have a single card in the first row, such that the card does not span (i.e. it is the same width as the cards in the following rows).

So, here are the desired layouts for 1-3 columns (depending on screen width) where x means “card” and . means “empty space”:

x
x
x

x .
x x
x x

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

I have tried specifying grid-row for the 2nd card onward but since I do not know in advance how many columns there will be (responsive grid template), I do not know.

I would need a property like min-grid-row.