一行代码搞定响应式栅格，但 auto-fill 和 auto-fit 到底差在哪，我看了半天才想明白。

那行代码

1
2
3
4
5
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

意思很直白：每列最窄 320px，最宽平分剩余空间，能塞几列塞几列。

auto-fill 和 auto-fit 的差别

差别只在容器里没那么多内容的时候：

  • auto-fill —— 空轨道也留着占位，卡片靠左排，右边空一片
  • auto-fit —— 空轨道收起来，剩下的卡片拉伸铺满整行

所以：

场景 用哪个
卡片数量固定，想保持每张一样宽 auto-fill
卡片可能很少，想让它铺满 auto-fit

一个容易忘的坑

minmax(320px, 1fr) 里的 320px 是最小值，不是固定值。窗口宽到能塞下两列时，每一列都会超过 320px。

如果想让卡片永远不超过某个宽度，得换成：

1
grid-template-columns: repeat(auto-fill, minmax(320px, 360px));

这样列宽就在 320 到 360 之间浮动，不会无限拉伸。

我一开始就是被这个坑住了：以为写了 320px 卡片就永远是 320px 宽。