包装css网格并拉伸一个网格项以占用所有空列

Question

我正试图让最后一个网格项填充css网格中的所有空列，该网格具有自动换行项的功能。

我已经阅读了Expand adiv to fill the remaining width和Make last element take remaining width=with wrappeng(and with IE9 support(，但它们没有回答动态包装网格的情况，动态包装网格在这里是重要的部分，因为它们是为float和display: block制作的。

因此，例如，如果网格项被包裹在一个新行中，我希望它拉伸以占据所有的空白。

如果您查看代码，那么div编号7应该总是占用行中的所有空格。我已经设法破解了一些看起来不够健壮的东西，使用100vw有更好的方法吗？

对于以下示例：调整窗口大小以查看项目换行到下一行：

* {
box-sizing: border-box;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.grid-element {
background-color: deepPink;
padding: 20px;
color: #fff;
border: 1px solid #fff;
}
.grid-element:last-of-type {
/*width: 100vw;*/ /* Is there a better way? */
}
body {
padding: 2em;
}
hr {
margin: 80px;
}

<div class="grid-container">
<div class="grid-element">
1
</div>
<div class="grid-element">
2
</div>
<div class="grid-element">
3
</div>
<div class="grid-element">
4
</div>
<div class="grid-element">
5
</div>
<div class="grid-element">
6
</div>
<div class="grid-element">
7
</div>
</div>

Answer 1

它可以用display: flex实现。此外，有必要使用flex-grow属性。

正如mdn所说的flex-grow:

flex grow CSS属性设置flex项的flex grow因子主要尺寸

* {
box-sizing: border-box;
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-element {
width: 10%;
border: 1px solid #000;
flex-grow: 1;
min-height: 120px;
box-sizing: border-box;
margin: 0 5px 10px;
justify-content: space-between;
text-align: center;
}

<div class="flex-container">
<div class="flex-element">
1
</div>
<div class="flex-element">
2
</div>
<div class="flex-element">
3
</div>
<div class="flex-element">
4
</div>
<div class="flex-element">
5
</div>
<div class="flex-element">
6
</div>
<div class="flex-element">
7
</div>
</div>