首先，两者都是按照最小宽度(可以通过width、minmax、或者auto设置)创建尽量多的轨道，如果剩余空间不足一个轨道，两者都会把这部分空间平均分配给每个轨道，如果剩余空间超过一个轨道，那么auto-fill会将空轨道以外的部分平均分配，auto-fit会把所有剩余空间平均分配。
示例
html
<div class="box1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
css
.box1,
.box2 {
height: 200px;
display: grid;
grid-gap: 10px;
}
.box1 {
background: #ffeaa7;
/* 按照100px宽度创建尽量多的轨道，将(剩余空间 - 空轨道) 平均分配 */
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.box1 > div {
background: #fdcb6e;
}
.box2 {
background: #fab1a0;
/* 按照100px宽度创建尽量多的轨道，将剩余空间 平均分配 */
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.box2 > div {
background: #e17055;
}
aPMVg0.png
