不用一分钟，理解css中repeat函数的auto-fill和auto-fit

相信大家在使用grid布局时，总难免会使用到

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

这里的auto-fit很好理解，就是按照容器大小和元素数量，将网格自动分成多少列。

比如有4个元素时：

页面宽度200px，则每行有一个元素

页面宽度800px，则每行有四个元素，

页面宽度大于800px是，auto-fit会等分拉伸各个元素，以便自适应页面宽度，也就是页面不管有多宽，都会拉伸元素来适应页面。

但auto-fill不会一直拉伸，而是伺机等待页面宽度可以装入下一个元素（比如1000px），然后将各个元素重新压缩为minmax(200px，1fr)中的200px，以便让页面有五个网格，即使该容器内只有四个元素，auto-fill也会留出尽可能多的网格（1000/200，这时候是5个网格，最后的网格由于没有元素所以是空网格）。

总结：auto-fit和auto-fill最大的区别在于，当容器宽度超出了元素所需宽度后，auto-fit会拉伸元素来填充容器，所以每行网格数最多是元素个数；而auto-fill会堆叠元素（网格）来填充容器，在达到可堆叠宽度前，先拉伸，达成可堆叠宽度后会将各元素压缩回最小宽度，腾出空间再堆叠，所以网格数量会随着宽度增大而增加。

print("-------手动分割线--------")

第一次写，如有错误之处，敬请纠正    （听劝一哥）