如何使用 minmax func 来限制列数

Question

我正在尝试使用 css-grid 创建响应式网格设计。我想要大约 400 像素的列并且可以扩展到 500 像素。当一个网格单元不能再占据它的空间时，我希望它换行。本质上，在小视口上，我想要一列，而在更大的视口上，我想要最多 2 列。有没有办法在没有媒体查询的情况下做到这一点？我试图避免这种情况，因为我有一个可以扩展的侧边栏，它不会改变视图宽度。

.grid-wrapper {
  display: grid;
  /* below line DOES NOT WORK */
  grid-template-columns: repeat(minmax(1, 2), minmax(400, 500));
}

Answer 1

网格自动填充最大宽度

您可以不做 minmax，然后重复 minmax。

重复是第一个告诉重复多少次，第二个是重复什么。

使用自动填充为您提供最小宽度。

grid-template-columns: repeat(auto-fill,minmax(400px,1fr));

你可以告诉.grid-wrapper，例如max-width: 1000px;

就像你有办法控制网格一样。

我在这里做了一个简短的解释，但是，我并没有完全理解你的解释——你的桌子是什么样子的。