共计 556 个字符，预计需要花费 2 分钟才能阅读完成。
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 折叠空轨道。
正文完