列数应在 1 到 3 之间的网格

Question

在我的网站上，我有一个网格，应该有 1 到 3 列。我可以使用

auto-fit

:

轻松地使列的数量动态化

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
  gap: 40px;
}

然而，列的数量可以超过 3，这在更宽的屏幕上看起来很糟糕，我找不到限制列数量的方法。
这是 5 列的样子（不好）：

我尝试使用

max(3)

而不是

auto-fit

，但这只是将数量设置为 3，而不是使其动态化。
我可以做些什么来将列数限制为 3？