子元素自动填充父容器， 并且会自动折行- dispaly: grid

很多时候，我们都需要这样的布局

1. 父元素宽度是resizable
2. 子元素个数不确定
3. 子元素无论都少宽度都可以自动填充父元素 当子元素过多时，
4. 子元素可以自动折行
5. 每行的子元素宽度一置，都是左对齐
   如图：
   

如果实现以上的1-4的需求，我们完全可以用dispaly:flex;来实现，如：

效果图如下：

我们发现这确实满足了我们需求的1，2，3，4 但是，你会发现第一行与第二行元素不是对齐的，这样就不满足我们的需求5了，所以我们换一种布局方式，就是dispaly: grid

效果图：

这样就实现了。

下面我们来区分一下auto-fit 与auto-fill 实现效果的区别吧。
在上面的例子中auto-fit 与auto-fill 效果是一样的，让我们删掉一些div，只留3个子元素试试吧。

其中grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); 效果如图

而grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); 效果如图

这下我们明显看到区别了吧。

注：auto-fit和auto-fill只有在容器宽度大于子元素的最小宽度总和时才有显示区别。

auto-fill 最后一步是会保留空轨道留白，不会折叠空轨道，而auto-fit则把空白轨道的空间全部平均分配给了有元素的轨道， 所以auto-fit的最后一步是，折叠空轨道，将空轨道的空间全部平均分配给已有元素的轨道，不留空白。