Javascript 如何使CSS动态列网格的最后一个元素占据所有列？

我有一个box容器类，它是一个CSS网格容器。如您所见，它是动态的，因为使用了

repeat（自动调整，最小值（340px，1fr））

.box容器{
高度：100vh；
显示：网格；
网格模板列：重复（自动拟合，最小值（150px，1fr））；
网格自动行：100px；
}
.box:第n个孩子（奇数）{
背景颜色：浅蓝色；
边框：1px实心#000；
}
.box:第n个孩子（偶数）{
背景颜色：海蓝宝石；
边框：1px实心#000；
}

文件

通过使用，您可以轻松获得所需的行为。酒店将负责调整容器内的物品

因此，当您使用小屏幕设备时，

flex-wrap

会将溢出的项目移动到新的

行

。因此，我们通常告诉项目根据可用空间增长

并且会告诉项目限制它可以收缩的最小宽度

下面是一个工作示例。

.box容器{
高度：150像素；
显示器：flex；
柔性包装：包装；
}
.盒子{
显示器：flex；
柔性生长：1；
弹性基准：150px；
}
.box:第n个孩子（奇数）{
背景颜色：浅蓝色；
边框：1px实心#000；
}
.box:第n个孩子（偶数）{
背景颜色：海蓝宝石；
边框：1px实心#000；
}

文件

通过使用，您可以轻松获得所需的行为。酒店将负责调整容器内的物品

因此，当您使用小屏幕设备时，

flex-wrap

会将溢出的项目移动到新的

行

。因此，我们通常告诉项目根据可用空间增长

并且会告诉项目限制它可以收缩的最小宽度

下面是一个工作示例。

.box容器{
高度：150像素；
显示器：flex；
柔性包装：包装；
}
.盒子{
显示器：flex；
柔性生长：1；
弹性基准：150px；
}
.box:第n个孩子（奇数）{
背景颜色：浅蓝色；
边框：1px实心#000；
}
.box:第n个孩子（偶数）{
背景颜色：海蓝宝石；
边框：1px实心#000；
}

文件

您可以尝试

flex

flex-grow

properties。或者您可以使用类似于

：nth-child（3n）：last-child{grid-column:1/2；}

I可以这样做，但这不是动态的。它将使最后一个框永远接受这两列，而我只希望它只在有两行或更多行时才接受这两列。您可以尝试

flex

flex-grow

properties。或者您可以使用类似于

：nth-child（3n）：last-child{grid-column:1/2；}

I可以这样做，但这不是动态的。它将使最后一个框永远接受这两列，而我只希望它只在有两行或更多行时才接受这两列。