csscss-gridresponsiveness

Grid column responsive width but no more and no less than


I would like to have a CSS grid with cards, that are responsive and can grow and shrink as in these pictures: small screen - two columns

larger screen - three columns

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:

only 2 cards - grow indefinitely

How can I give an upper limit for the minmax function?


Solution

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