flex布局的最后一行？用grid替代flex吧！

最近用flex做一个自适应布局，简化代码如下：

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.item {
  width: 100px;
  height: 100px;
  background: red;
  margin: 10px 0;
}

实现效果如下：

当每行数量一样，或最后一行只有一个item的时候，是我想要的效果。但当最后一行数量多余1个且少于前面行数的数量时，就不是我想要的效果了。我希望数量不足时，能保持左对齐的样式，且项目间距与前面相同。经研究，改为grid布局。代码如下：

.container {
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fill, 100px);
}
.item {
  width: 100px;
  height: 100px;
  background: red;
  margin: 10px 0;
}

实现效果如下：

如上，完全实现了我想要效果。

其中，grid-template-columns属性定义了每一列的列宽。repeat()函数表示当列很多时，简化重复的值。auto-fill关键字表示自动填充，用于案例中这种需求，项目大小固定，但容器不固定，且希望每一行可以容纳尽量多的项目。

grid-template-columns: repeat(auto-fill, 100px);表示的意思就是，每一列的宽度为100px，每一行都尽量多的填充项目，从而实现上图中的效果。完美解决了flex布局中最后一行的缺陷。

关于grid布局的详细说明，可参考阮大神的文章。