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

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

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

  
1
  
2
  
3
  
41
  
5



  
1
  
2
  
3
  
41
  
5

.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'