CSS Grid实现最后一行占满宽度且子项均匀分布

我有一组列表项，要求每个子项拥有最小宽度，当调整屏幕尺寸时子项自动换行至下一行。当前使用的CSS Grid代码如下：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  align-items: center;
}

div {
  text-align: center;
}

<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div>
  <div>Ten</div>
</div>

我希望最后一行始终占满容器100%的宽度，例如当Nine和Ten换行到最后一行时，它们能横向铺满容器并居中对齐。请问这种效果能否通过CSS Grid实现？

纯CSS Grid无法直接实现「最后一行元素自动铺满容器宽度」的效果。原因在于CSS Grid的列轨道数量是由容器宽度和minmax参数预先计算得出的，所有行的列轨道数保持一致——即使最后一行元素数量少于列数，剩余的轨道仍会保留，导致最后一行的元素只能占据对应轨道的宽度，无法自动合并剩余轨道来铺满容器。

如果一定要用CSS Grid实现类似效果，只能通过添加伪元素的hack方法，但这种方案不够灵活（需要预先预估最大可能的列数），且无法完美适配所有场景。更简单且符合需求的方案是改用Flexbox：

.container {
  display: flex;
  flex-wrap: wrap;
}

.container > div {
  flex: 1 1 100px; /* 最小宽度100px，剩余空间自动分配 */
  text-align: center;
}

这段代码会让每个子项保持最小100px的宽度，容器宽度不足时自动换行；最后一行的元素会自动拉伸，均匀分配容器剩余空间，从而实现铺满容器宽度的效果。

如果坚持使用CSS Grid，也可以通过嵌套Flex的方式折中实现：外层用Grid处理自动换行和最小宽度，内层用Flex让最后一行元素铺满：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0; /* 消除Grid列间距 */
}

.row {
  display: flex;
  grid-column: 1 / -1; /* 每一行占满所有Grid列 */
  flex-wrap: wrap;
}

.row > div {
  flex: 1 1 100px;
  text-align: center;
}

对应的HTML需要调整为按行分组：

<div class="container">
  <div class="row">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
  </div>
  <div class="row">
    <div>Six</div>
    <div>Seven</div>
    <div>Eight</div>
    <div>Nine</div>
    <div>Ten</div>
  </div>
</div>

不过这种方式需要手动分组，灵活性不如纯Flexbox方案。

内容的提问来源于stack exchange，提问作者SoluableNonagon