CSS网格与最大内容自动匹配

我有4个专栏。第1列和第4列的实际含量为150px，第2列为250px，第3列为370px。当浏览器宽度更改时，我想换行。当我减小浏览器的宽度时，我希望每一列在包装之前缩小到其最低宽度。所以我想象第四列在低于150px宽度后，会以100%的宽度下降到下一行

以下是我认为应该做的事情：

repeat(auto-fit, minmax(max-content, 1fr))

有没有一种方法可以在不通过“最大内容”的固定宽度的情况下实现这一点

这是我使用媒体查询和硬宽度的解决方案

下面是我在上面的提琴中使用的html/css：

.container{
显示：网格；
网格模板列：重复（自动拟合，最小值（370px，1fr））；
栅隙：8px；
}
@介质（最大宽度：799px）{
.集装箱{
网格模板列：minmax（最大内容，1fr）；
}
}
@介质（最小宽度：800px）{
.p2，
.容器p3{
格线柱：自动/跨度2；
}
}
.container>div{
背景颜色：灰色；
文本对齐：居中；
}

---

在使用网格时，我遇到了一个类似的问题：

网格模板列：重复（自动调整，最小值（最大内容，1fr））

如果我们看一下文档，就会发现

minmax

命令是有效的：

但在一份关于csswg的重复文档中，它声明了一条简单的规则，禁止所有这一切的发生；

repeat（）语法的一般形式大约为

重复（[|自动填充|自动调整]，）

第一个参数指定重复的次数。第二 参数是一个曲目列表，重复该次数

但是，有一些限制：

• repeat（）符号不能嵌套

• 自动重复（自动填充或自动拟合）不能与 固有或灵活尺寸

什么是固有尺寸或弹性尺寸

• 固有的大小调整功能（

  mincontent

  ，

  max content

  ，

  auto

  ，

  fit-content（）

  ）

因此，该命令在网格中不起作用，因为每个列/行的大小不同，无法进行换行。请参见下图作为示例

---

此行为应改为使用flex box执行

好的研究兄弟！我仍然不能用repeat（）来概括我的想法，但这个答案确实有助于启发一些东西。感谢您建议使用flex容器而不是网格。我花了一些时间试图让grid使用auto-fit处理可变的内容大小，正如您指出的，这是不可能的。但是一个flex容器很好地分布了我的列表项，并以一种响应的方式进行缩放，无论这些项的大小如何。非常简单和直接的解释。最好是使用flex-box。