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

Question

我正在尝试让最后一个网格项填充 CSS 网格中的所有空列，该网格具有自动适合包装项的功能。

我读过Expand a div to fill the remaining width 和Make last element take remaining width with wrapping (and with IE9 support)，但他们没有回答动态包装网格的情况，因为它们是为float 和display: block 制作的，因为它们是这里的重要部分。

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

如果您查看代码，那么 7 号 div 应该始终占据行中的所有空白空间。我已经设法破解了一些看起来不够强大的东西，使用 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属性。

As mdn says about flex-grow:

flex-grow CSS 属性设置 flex 项目的 flex 增长因子 主要尺寸

* {
  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>