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