Ширина чувствительной колонки сетки, но не больше и не меньше

Question

Я хотел бы иметь сетку css с картами, которые реагируют и могут расти и уменьшаться, как на этих рисунках:

По этой причине я использовал функцию minmax css:

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

Однако, если в списке больше нет карт, которые можно поместить в один ряд существующие карты растут до предела родителя:

Как задать верхний предел для функции minmax?

Answer 1

Заменить repeat(auto-fit, minmax(300px, 1fr)) на repeat(auto-fill, minmax(300px, 1fr))