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
.
EDIT:
- I cannot place the first item outside the grid because I want all cards to have the same width (responsive)
2
Answers
you can use mediaquerie to set your number of columns and dispatch the first card always in the first cell, then add a pseudo or two while you have 2 or 3 columns.
Because of 3 cols max, pseudos can easily be used.
example below of the idea
You can get close by placing a pseudo-element in row 1 (here colored blue) that spans the the end column (with a min-width matching you min-column width).
Then at the smallest width (say) mobile, you disable the pseudo-element in a media query.
https://codepen.io/Paulie-D/pen/bGPbBNr