I would like to have a CSS grid with cards, that are responsive and can grow and shrink as in these pictures:
So for this reason I have used minmax
CSS function:
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
However, if there are no more cards in the list to be put in a single row, the existing cards grow to the limits of the parent:
How can I give an upper limit for the minmax
function?
Replace repeat(auto-fit, minmax(300px, 1fr))
with repeat(auto-fill, minmax(300px, 1fr))