Html 将图元拉伸到自动计算网格的末端，而不仅仅是显式网格

在CSS网格中，可以使用

网格列：1/-1

在整个显式网格中拉伸元素。但是，如果添加新元素，并且网格自动具有比显式声明更多的列，则不会产生相同的效果

是否有任何值可以代替

-1

，强制项目一直延伸到网格的末端

在下面的示例中，由于

网格自动流

设置为

列

，因此额外的元素会添加新列。我希望

.stretch

元素拉伸网格的整个宽度，而不仅仅是指定的3x3网格的宽度

.grid{
显示：网格；
网格模板行：1fr 1fr 1fr；
网格模板柱：1fr 1fr 1fr；
网格自动流：列；
宽度：300px；
}
.项目{
边框：1px纯红；
填充：15px；
}
.伸展{
网格柱：1/-1；
}

拉伸
.
.
.
.
.
.
.
.
.

一个老套的想法是让元素跨越大量列：

.grid{
显示：网格；
网格模板行：1fr 1fr 1fr；
网格模板柱：1fr 1fr 1fr；
网格自动流：列；
宽度：300px；
}
.项目{
边框：1px纯红；
填充：15px；
}
.伸展{
格构柱：跨度20；
}

拉伸
.
.
.
.
.
.
.
.
.
拉伸
.
.
.
.
.