auto-fill 保留所有可能列（含空列），auto-fit 合并空列使非空列拉伸占满；二者均用于 repeat()，但视觉效果截然不同。

auto-fill 和 auto-fit 有什么区别？

用 auto-fill 还是 auto-fit，直接决定网格项会不会“撑开”空列。很多人写了 repeat(auto-fill, minmax(200px, 1fr))) 却发现容器右侧留白，其实是该用 auto-fit——它会把空轨道合并掉，让剩余项拉伸占满；而 auto-fill 会保留所有可能的列（哪怕没内容），适合做“预留槽位”的场景，比如拖拽布局。

常见错误现象：grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))) 在小屏下生成一堆看不见的空列，导致横向滚动或布局错位。

• auto-fill：尽可能多地重复轨道，不管有没有子元素填入
• auto-fit：同样尝试重复，但会把空轨道尺寸设为 0，再让非空轨道用 1fr 平分剩余空间
• 二者在 minmax() 外层行为一致，但视觉结果差异极大，别凭感觉换

minmax() 的两个参数怎么选才不翻车？

minmax() 是自动填充的灵魂，但第一个参数不是“最小宽度”，而是“轨道最小可取值”；第二个也不是“最大宽度”，而是“单个轨道能拿到的最大份额”。写成 minmax(300px, 2fr) 是错的——fr 单位不能出现在 max 位置，浏览器会静默降级为 max-content，结果就是列宽失控。

使用场景：响应式卡片列表、仪表盘小组件、相册缩略图流。

• 正确写法只有 minmax(, 1fr) 或 minmax(, max-content)
• 1fr 表示“等分剩余空间”，多个 1fr 会均分，写 2fr 没意义（自动填充里所有轨道都同构）
• 如果希望卡片最小 280px、最多占满一行三分之一，就用 minmax(280px, calc((100% - 2em) / 3))，但注意这会失去弹性，慎用

为什么设置了 auto-fill 还是只显示一列？

大概率是父容器没设宽度，或者被 flex/float 等上下文干扰了计算。CSS Grid 的自动填充依赖于容器的**可用内联尺寸**（inline size），如果父元素宽度为 auto 且没有约束（比如没设 width、没在 flex 容器中设 flex-basis），那么 minmax() 的百分比部分无法解析，整行退化为单列。

性能影响：这种情况下浏览器仍会反复尝试计算轨道数，可能触发不必要的重排。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 检查父容器是否设置了明确宽度，或在 flex 布局中加 flex-basis: 100%
• 用 display: grid 的元素不能同时有 float，否则网格格式化上下文不成立
• 避免在 内部或 position: absolute 脱离文档流的元素上直接应用自动填充

  IE 兼容性怎么绕过去？

  IE10/11 完全不支持 auto-fill 和 auto-fit，连语法都会报错，导致整个 grid-template-columns 声明失效，回退到浏览器默认（通常是单列）。不能靠 @supports 检测，因为 IE 对 @supports (display: grid) 返回 true，但对 auto-fill 直接忽略整条规则。

  兼容方案只能是双重声明：先写一个 IE 可识别的固定列数版本，再覆盖为现代语法。

  示例：

  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)));

  注意第二行会在支持的浏览器中覆盖第一行，IE 则只认第一行。

  • 别用 fit-content() 替代，IE 也不支持
  • 如果项目必须支持 IE，建议用 display: flex + flex-wrap 作为基础布局，Grid 仅作增强
  • autoprefixer 不会处理 auto-fill，别指望它帮你降级

  事情说清了就结束。最常漏掉的是容器宽度上下文和 IE 的声明覆盖顺序——这两处一错，整个自动填充就静默失效，连控制台都不报错。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！