auto-fill保留空轨道以预占位，auto-fit合并空轨道使内容拉伸占满；前者适合仪表盘等需固定列数场景，后者适用于响应式卡片列表。
auto-fill 和 auto-fit 的区别到底在哪
很多人写 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))) 发现容器空着一大块，或者列数没按预期撑满——问题大概率出在用了 auto-fill 却没理解它和 auto-fit 的行为差异。
auto-fill 会为「可能放入的每一项」预留轨道，哪怕实际没内容；auto-fit 则会把空轨道合并掉，让剩余项拉伸占满空间。视觉上，auto-fit 更符合“自动排列”的直觉。
- 用
auto-fill：适合需要预占位、后续动态插入内容的场景（比如拖拽面板） - 用
auto-fit：更常见，内容少时列变宽，内容多时自动换行，真正响应式 - 两者在语法上完全互换，仅语义和渲染结果不同
minmax() 里两个参数的实际影响
minmax(200px, 1fr) 看似简单，但第一个值是「最小宽度」，第二个是「最大可分配宽度」，不是固定值。当容器宽度不足以塞下两列（比如总宽 380px），浏览器不会强行压缩到 190px，而是换行——因为 200px 是硬性下限。
- 如果希望列宽严格不小于 200px 且能弹性拉伸，这个写法没问题
- 若想允许更小（比如移动端），改成
minmax(120px, 1fr)或加媒体查询 - 避免写成
minmax(1fr, 1fr)：这会让所有轨道等宽，失去响应意义 -
1fr在auto-fill中仍受容器约束，不是无限大
为什么 grid-auto-flow: column 不配合 auto-fill
默认 grid-auto-flow 是 row，即新项从左到右、满了换行。设成 column 后，auto-fill 会尝试在列方向预占轨道，但此时 grid-template-columns 定义的是列数，逻辑冲突——浏览器无法同时满足「列数由 auto-fill 推导」和「自动按列填充」。
- 要实现竖向优先布局，改用
grid-template-rows: repeat(auto-fill, minmax(100px, 1fr)))+grid-auto-flow: column - 但注意：此时每行高度固定，内容高度不一致时容易错位
- 绝大多数「自动排列」需求其实不需要改
grid-auto-flow，保持默认即可
IE 不支持，但 fallback 很难做
auto-fill 和 minmax() 都是 CSS Grid Level 2 特性，IE 完全不识别，连降级为 display: block 都不行——因为整个网格声明会被忽略，子元素变成文档流普通块级元素，排版彻底崩坏。
- 如需兼容 IE，必须用
@supports包裹 Grid 代码，并给外层加display: flex或floatfallback - 但
flex-wrap无法精确控制最小宽度，float需要清除浮动，维护成本高 - 现代项目建议直接放弃 IE，或用 PostCSS 插件（如
postcss-grid-kiss）生成兼容方案
真正麻烦的不是写法本身，而是当内容高度差异大、又启用了 align-items: start 时，auto-fill 下的轨道高度不会自适应——得靠 grid-auto-rows 单独设行高，这点很容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
