Html CSS网格自动流密度仅更改狭窄元素的流

我的网格有

1fr

和

3fr

宽元素。两个元素具有相同的高度

这是网格在正常行流中的外观：

这就是“网格自动流动：稠密”时网格的外观：

正如您所观察到的，最后一个窄元素向上移动以填充间隙，但在3fr单元之前仍留有间隙

这就是我期望“网格自动流：稠密”的工作方式：

有没有办法使

网格自动流动：密集的
回流宽元素以完全避免间隙？

谢谢。
网格无法更改元素的顺序。作为解决办法，我可以建议一个小技巧。LAT同意我们的
3fr
元素将始终是查询中的最后一个元素。因此，在这一点上，我们可以使用
：nth-child（）


.grid{
显示：网格；
网格模板列：重复（3，1fr）；
网格自动行：自动；
栅隙：10px；
边缘底部：100px；
}
.grid>div{
高度：100px；
背景：ddd；
}
.三{
网格柱：1/4；
网格行：1；/*从第一行间隙开始*/
}
.3：第n个孩子（4），
.3：第n个孩子（5），
.3：第n个孩子（6）{
网格行：2；
}
.3：第n个孩子（7），
.3：第n个孩子（8），
.3：第n个孩子（9），
.three:n子元素（n+9）/*对于任何元素位置>9*/{
网格行：3；
}

CSS网格无法做到这一点谢谢，非常好的技巧！我必须对它进行一些调整，但我认为SCSS功能将非常方便。再次感谢你！