auto-fit 会拉伸空闲轨道填满容器，auto-fill 则只按需生成列并留白；实际效果受 minmax() 最小值、子项尺寸约束及浏览器兼容性共同影响。
auto-fit 和 auto-fill 的行为差异到底在哪
auto-fit 会在网格容器有空闲空间时，把重复的轨道拉伸填满；而 auto-fill 不会拉伸，只按需生成列，剩余空间留白。很多人以为换用 auto-fit 就能“自动撑满”，结果发现：当子元素少于最大可能列数时，它确实会拉伸，但前提是这些子元素本身没设固定宽或 min-width 过大，否则浏览器会优先尊重内容尺寸，导致“看起来没占满”。
-
auto-fit实际是：repeat(auto-fit, minmax(200px, 1fr))→ 先按minmax()尝试生成尽可能多的列，再把所有轨道统一设为1fr - 如果某子项内容太宽（比如长文本、图片未约束），它会撑开所在轨道，破坏等分布局
-
minmax(0, 1fr)能强制均分，但存在兼容性风险（IE 完全不支持，旧版 Safari 对0处理异常）
为什么加了 minmax() 还是不均分
常见错误是写成 minmax(250px, 1fr)，其中 250px 是 min-width，只要容器宽度 ÷ 列数 < 250px，就根本生成不了那么多列——auto-fit 会退化为只放得下几列，然后把这几列拉成 1fr，但总宽还是不够。
- 真正起作用的是
minmax()的第一个参数（最小值），它决定了“最多能塞几列” - 想让少量元素也占满，要么压低最小值（如
minmax(100px, 1fr)），要么改用minmax(0, 1fr) - 注意：
minmax(0, 1fr)在 Flexbox fallback 场景中更安全，但在 Grid 中需确认目标浏览器支持（Chrome 57+、Firefox 52+、Safari 10.1+ 可用）
子元素自身宽度干扰布局的典型表现
最常被忽略的一点：子元素如果写了 width: 100% 或含 inline-block + white-space: nowrap，它会拒绝收缩，导致所在网格轨道无法被压缩，进而让其他轨道变窄甚至溢出。
- 图片默认不响应式，需显式加
img { max-width: 100%; height: auto; } - 文本块若含长单词或 URL，要加
word-break: break-word或overflow-wrap: break-word - 避免在子元素上写死
width或flex-basis，尤其不要和 Grid 轨道逻辑冲突
兼容性兜底时别只靠 @supports
@supports (display: grid) 能筛出支持 Grid 的浏览器，但无法区分 auto-fit 行为是否一致。比如 Safari 10.0 对 auto-fit 的处理就有偏差，某些情况下会当 auto-fill 用。
立即学习“前端免费学习笔记（深入）”；
- 更稳妥的做法是：用
display: flex+flex-wrap: wrap作为降级，配合flex: 1 1 calc(33.333% - 12px)模拟三列 - 不要依赖 JS 动态计算列数来 patch
auto-fit，因为 resize 重排开销大，且和 CSS Grid 的流式逻辑本质冲突 - 真实项目里，建议用 PostCSS 插件（如
postcss-grid-kiss）预编译出 fallback 规则，而不是 runtime 判断
Grid 的 auto-fit 不是魔法开关，它依赖整个链条配合：轨道定义、子项约束、容器尺寸、浏览器实现细节。少一个环节，就容易卡在“明明写了却没效果”的状态。
