Grid column responsive width but no more and no less than

Question

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?

Answer 1

Replace repeat(auto-fit, minmax(300px, 1fr)) with repeat(auto-fill, minmax(300px, 1fr))