我有一个像这样的整洁的响应式网格：
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
这使得每个网格项目的宽度至少为 200px。其中一项（红色）的宽度是其两倍，如下所示：
grid-column-end: span 2;
到目前为止很棒！
现在，当我调整到较小的宽度时，红色项目会强制网格变为两列。这给了我一个奇怪的小列，即使我指定了最小宽度为 200px。看：
我真的很希望红色项目折叠成一列，这样网格就不会破坏。
然而问题是，我不知道总网格的宽度，所以我无法使用在特定视口大小触发的媒体查询。
有没有办法将红色项目强制到一列，或者以另一种方式定义网格列来解决这个问题？
使用网格时，您需要记住尺寸和一些数学知识。 如果您告诉一个项目跨越 2 列，那么这意味着您始终希望网格中至少有 2 列，如果屏幕变小，它不会变成 1 列网格。 现在网格的最小宽度为 400px。
对于那个奇怪大小的列，因为您有 2 列，而第 2 列的最小宽度为 200px，而之后的项目则保留该奇怪的大小。
您可以在该断点处编写一个媒体查询来告诉您的项目 1 保留在第 1 列中，这样就可以修复它。
@media screen and (max-width:415px){
.item1 {
grid-column: 1;
background:red;
}
}
查看我在此处链接的 Codepen
参见 Codepen