Question

我有一个简洁的响应式网格，如下所示：

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

这将使每个网格项目的宽度至少为200px。其中一项（红色的一项）的宽度是其两倍，如下所示：

grid-column-end: span 2;

到目前为止很好！

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

我真的希望红色项折叠成一列，以使网格不会破裂。

但是问题是，我不知道整个网格的宽度，所以我不能使用以特定视口大小触发的mediaquery。

是否有一种方法可以将红色项目强制为一列，或者以另一种方式解决该问题来定义网格列？

Answer 1

在使用网格时，您需要记住尺寸和一些数学运算。如果您要告诉某个项目跨越2列，则意味着您始终希望网格中至少有2列，如果屏幕变小，它将不会变成1列网格。现在，您的网格的最小宽度为400px。

对于该奇怪大小的列，您有2列，而第2列的宽度最小为200px，之后的项目则保留该奇怪的大小。

您可以在该断点处编写媒体查询，以告诉您的商品1停留在第1列中，并且应该对其进行修复。

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

查看我在此处链接的Codepen