display: grid;
grid-gap: 12px 10px;
// 这里auto-fill和auto-fit的区别，主要是影响到元素个数比较少的情况
grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));auto-fill的效果如下：
auto-fit的效果如下：
grid中auto-fit和auto-fill的区别
auto-fill:在轨道重复过程中，尽可能多的根据元素创建轨道，如果创建的轨道数量是小数比如6.5，那么0.5就被称为剩余空间，剩余的空间不够一个轨道了，就相当于每个轨道1fr进行分配这个0.5的剩余空间，没有元素填充的空轨道不会折叠依然保留（相当于留了空白）。
auto-fit:在轨道重复过程中，尽可能多的根据元素创建轨道，并均分不到一个轨道的剩余空间。轨道分配完以后如果轨道中没有元素则将所有没有元素填充的空轨道折叠为0，即把没有元素填充的空轨道全被分配给有元素的轨道（相当于有元素填充的轨道全部为1fr）。最后没有空轨道剩余。
last：auto-fill和auto-fit一开始做的事情是一样的就是尽可能的分配轨道数量，区别在于后面空轨道是否会折叠为0。auto-fill不折叠空轨道，auto-fit折叠空轨道。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。