CSS 响应式网格布局：grid-column span 打破 minmax

Question

我有一个像这样的整洁的响应式网格：

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

这使得每个网格项目至少有 200 像素宽。其中一项（红色项）的宽度是原来的两倍，如下所示：

grid-column-end: span 2;

到目前为止很棒！

现在，当我调整到较小的宽度时，红色项目将网格强制为两列。这给了我一个奇怪的小列，即使我将最小宽度指定为 200 像素。看：

我真的希望红色项目折叠成一列，这样网格就不会中断。

但问题是，我不知道总网格的宽度，所以我不能使用在特定视口大小触发的媒体查询。

有没有办法将红色项目强制到一列，或者以另一种方式定义网格列来解决这个问题？

Answer 1

在使用网格时，您需要牢记尺寸和一些数学知识。 如果您告诉一个项目跨越 2 列，那么这意味着您总是希望网格中至少有 2 列，如果屏幕变小，它不会变成 1 列网格。 现在您的网格的最小宽度为 400 像素。

对于那个奇怪大小的列，因为您有 2 列，而第 2 列的宽度最小为 200 像素，之后的项目会留下那个奇怪的大小。

您可以在该断点处编写一个媒体查询，以告诉您的项目 1 留在第 1 列中，这样应该可以修复它。

@media screen and (max-width:415px){
.item1 {
grid-column: 1;
background:red;
}
}

查看我在此处链接的 Codepen

see on Codepen