CSS 网格 - 使下一行采用 100% 宽度并均匀地间隔项目

Question

我有一个连续的项目列表。我希望每个项目占据最小宽度。当用户调整屏幕大小时，我希望项目溢出到下一行。

.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% 的宽度。这可以通过 CSS 网格实现吗？

例如：如果九和十溢出，我希望这些项目从一端跨越到另一端并居中。

One Two Three Four Five Six Seven Eight 
          Nine         Ten

或者在更狭小的空间里

One Two Three Four 
Five Six Seven Eight 
    Nine   Ten

Answer 1

CSS

grid

（大声朗读属性）不是用于自动化儿童成长的正确工具。
CSS

flex

和

flex-grow

（在子元素上）is — 使用 CSS 换行

.container {
  display: flex; /* Don't use "grid" when "flex" is what you need */
  flex-wrap: wrap;   /* Or: flex-flow: row wrap; // children to new line if they overflow */
  
  & div {
    flex: 1; /* shorthand for: flex-grow:1; flex-shrink:1; flex-basis:0; */
    outline: 1px solid red;
    text-align: center;
    padding: 1em 2em;
  }
}

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