auto-fit和auto-fill的区别

首先，两者都是按照最小宽度(可以通过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