auto-fit 会“撑开”容器：它折叠空轨道后将剩余空间重新分配给有内容的列，而 auto-fill 坚持按最小尺寸占满整行，保留空轨道位置。
auto-fit 和 auto-fill 到底哪个会“撑开”容器？
看名字容易以为两者只是语义差别，其实行为差异直接决定网格是否随内容“自动延展”。auto-fit 会在空轨道被折叠后，把剩余空间重新分配给有内容的列；auto-fill 则不管有没有子元素，都坚持按最小尺寸占满整行——哪怕全是空轨道。
常见错误现象：grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) 写完发现容器右侧留白、最后一列没填满，其实是 auto-fill 强行保留了“本该存在”的空列位置，而你根本没放够元素。
-
auto-fit更适合响应式卡片列表：子项数量不确定，但希望它们尽可能铺满宽度 -
auto-fill适合需要预留槽位的布局（比如仪表盘固定 4 列，即使只加载了 2 块 widget，也要保持结构对齐） - 两者在
minmax()中表现一致，但结果轨道数可能不同——auto-fit可能合并为 2 列，auto-fill坚持生成 4 列（其中 2 列为空）
为什么用 auto-fit 有时列数突然变少？
这不是 bug，是 auto-fit 的核心逻辑：先生成所有可能轨道，再把空轨道“收掉”，最后把释放出的空间按比例分给非空轨道。一旦窗口缩到某个临界点，原本能塞下 3 列的区域，可能只剩 2 列的最小宽度余量，于是第三列被抹掉，前两列瞬间变宽。
使用场景：做移动端适配时，这个特性很友好；但做后台管理页固定栅格（如 12 栅格系统），反而会破坏设计预期。
立即学习“前端免费学习笔记（深入）”；
- 检查是否用了
minmax(200px, 1fr)这类带弹性上限的写法——1fr会让列争抢剩余空间，加剧“跳变” - 想稳住列数？换用
auto-fill+ 显式限制最大列数，例如：repeat(auto-fill, minmax(200px, 200px)) - 或加
grid-auto-columns: 200px配合auto-fit，让空轨道虽被收掉，但已有列宽度不因重分配而暴涨
Firefox 和 Safari 对 auto-fit 的兼容性陷阱
Chrome 从 v57 就稳定支持，但 Safari 直到 v16.4 才修复一个关键问题：当 auto-fit 遇到 fit-content() 或嵌套 minmax() 时，可能漏算轨道宽度，导致列宽异常压缩甚至归零。Firefox 则在某些 flex-grid 混合布局中，对 auto-fit 的空轨道回收时机判断偏保守，偶尔多留一列空白。
错误信息示例：Computed grid-template-columns is "none"（实际是计算失败回退）或 DevTools 里看到列宽显示为 0px 却仍有内容溢出。
- 避免在
minmax()第二参数用fit-content(300px)，改用300px或1fr - 在 Safari 上测试时，强制给网格容器设
width: 100%或min-width: 0，防止父容器收缩干扰轨道计算 - 不用
auto-fit时，auto-fill在所有现代浏览器中行为高度一致，是更稳妥的降级选择
grid-auto-flow: column 配合 auto-fit 会怎样？
绝大多数人只在 row 流向下用 auto-fit，但一旦切到 column，它的行为就反直觉了：它不再“合并空行”，而是尝试把子元素纵向填满，且 auto-fit 仍作用于列轨道定义——也就是说，grid-template-rows 不受 auto-fit 影响，只有列轨道会被动态收并。
使用场景极少，典型的是横向滚动的时间轴（日期为列，事件为行），但此时更推荐用 display: flex + flex-wrap，CSS Grid 在 column 流向下的自动轨道控制能力非常有限。
-
auto-fit在grid-auto-flow: column下依然只作用于grid-template-columns，对行无感 - 别指望它自动调整行数——
grid-auto-rows是唯一控制行高的方式，且不会因内容增减而重算 - 真要纵向自适应，优先考虑
grid-template-rows: repeat(auto-fit, minmax(80px, 1fr))+ 默认row流向，再用transform: rotateY(90deg)等 hack 是自找麻烦
真正难的不是记住区别，而是预判“空轨道”在哪出现——比如用 JavaScript 动态插入元素后，auto-fit 不会重新触发轨道计算，得靠 grid-template-columns 重设或强制重排。这点连很多资深前端都会忽略。
