相信大家在使用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("-------手动分割线--------")第一次写，如有错误之处，敬请纠正 （听劝一哥）
标签：repeat,fit,auto,元素,网格,宽度,页面 From： https://blog.csdn.net/qq_51637479/article/details/140988425