Css 网格柱响应宽度，但不大于且不小于

我希望有一个带有卡片的css网格，这些卡片响应迅速，可以像这些图片中那样增长和收缩：

因此，我使用了

minmax

css函数：

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

但是，如果列表中没有更多的卡放在一行中，则现有卡将增长到父级的限制：

---

我怎样才能给最小值函数一个上限？

用

重复（自动填充，最小值（300px，1fr））
替换
重复（自动填充，最小值（300px，1fr））
太好了，它可以按照我的要求工作，但有一个例外：300px仍然是网格项的最小宽度，但最大宽度尚未确定。这对我来说很好，因为如果项目较少，项目不会增长，但我想知道最大宽度，以便我可以创建精确大小的缩略图。你知道如何计算一件物品的最大宽度吗？你可以添加你想要的最大宽度，而不是1fr重复（自动填充，最小宽度（300px，400px））例如，它不起作用，它会让他们总是有最大宽度找到它，物品将扩展到最大最小宽度2倍非常有用，不知道这一点