auto-fill 和 auto-fit 在 CSS Grid 中的不同表现

CSS 属性 grid-template-columns 有两个长得很像的值 —— auto-fill 和 auto-fit。

这两个值都有所谓的“自适应”的味道，但在指定列宽后，表现是有区别的，来看下面这组代码

<div class="grid-container grid-container--fill">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>41</div>
  <div>5</div>
</div>
<hr>
<div class="grid-container grid-container--fit">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>41</div>
  <div>5</div>
</div>

.grid-container {
  display: grid;
  gap: 5px;
}

.grid-container > div {
  border: 1px solid #ccc;
  text-align: center;
  background-color: gray;
}

.grid-container--fill {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.grid-container--fit {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

最后的显示效果如下图

在容器宽度是 3200px 的情况下，auto-fill 为了塞入更多的列，列宽度控制在了 100px 左右；而 auto-fit 则是将现有的五列填满了容器空间。


参考资料：Auto-Sizing Columns in CSS Grid: 'auto-fill' vs 'auto-fit'