SOURCE

// 可以看到
// 1. 子元素和gap最小宽度之和 200*(4+1)+(gap宽度) = 1000 > 999容器宽度 的时候, 这两者毫无区别(如果有gap需要计算gap宽度)

// 2. 在容器宽度 >= 1000 之后, 两者出现区别, 
// auto-fit 不会增加列的数量, 而是把总容器多出来的宽度/4分给各子元素
// 而auto-fill 会增加一列或者多列, 此时每列宽度为200, 然后将多出来的宽度平均(按权重)分给每一列

// 总结一下就是:
// auto-fit不会增加列, 父元素分宽度给现有列
// auto-fill会增加列, 父元素分宽度给所有列
// 若每列宽度是固定的grid-template-columns: repeat(auto-fill, 200px); 那么 auto-fit和auto-fill也无区别

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  
</div>

.container{
    display: grid;
    background: white;
    width: 1100px;
    height: 100px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    justify-content: stretch;
    align-content: stretch;animation
}

.item{
  background: blueviolet;
}
.item:nth-child(2) {
  background: grey;
}
.item:nth-child(3){
  background: greenyellow; 
}