【Css】grid里 auto-fill和auto-fit的区别

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折叠空轨道。