auto-fit丢弃空轨道使卡片拉伸填满，auto-fill保留所有轨道导致留白；前者按子元素数量建列，后者按容器宽度硬算列数，临界点受minmax下限与gap共同影响。
因为它们在布局计算阶段对“空轨道”的处理逻辑完全相反：auto-fit直接丢弃没内容的轨道，auto-fill则强制保留所有能塞下的轨道——这不是渲染差异，而是浏览器生成列线前就决定的根本行为。
auto-fit 为什么会让卡片突然变宽？
它不按容器宽度“上限”算列数，而是先数子元素个数，再建对应数量的轨道。比如容器宽 850px，minmax(280px, 1fr) 理论最多 3 列，但只有 2 个卡片时，就只建 2 条轨道，把 850px 均分给它们 → 每列约 425px。
- 窗口从 850px 缩到 849px，可能立刻从 3 列跳成 2 列，卡片宽度突变——这是正常行为，不是 bug
- 临界点由
minmax()下限 +gap共同决定，1px 差异就能触发重算 - 用 DevTools 的 Grid 面板勾选 “Show track sizes”，直接看列线数量变化，比肉眼判断更准
auto-fill 为什么右侧总留白、甚至触发横向滚动？
它根本不看子元素有几个，只按 minmax() 下限和容器宽度“硬算”最多能塞几列。哪怕只放一个 <div>，只要容器够宽，就生成全部轨道。
<ul>
<li>例如 <code>grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 在 900px 容器中会生成 3 列（900 ÷ 280 ≈ 3.2 → 3），剩下 2 条轨道真实存在、参与空间分配
gap 会先从容器宽里扣掉所有 gap 占位，再算能放几列——容易比预期少一列1fr，空列也会均分剩余空间，导致有内容的项被挤压变形为什么写了 auto-fit 却没生效？
常见失效原因不是语法错，而是写法或上下文不满足前提条件。
-
repeat(auto-fit, 200px)是无效的——必须搭配minmax()，比如minmax(280px, 1fr) - 父容器没设宽度（如
inline-grid或未设width），grid 宽度由内容撑开，缩放基础就没了 - 子元素没收敛：
img缺height: auto、flex子项缺min-width: 0、文字块缺overflow: hidden，都会顶开列宽 - Safari ≤16.3 对
repeat(auto-fit, 1fr)（没minmax()）会静默退化为单列；IE 完全不支持auto-fit
真正难调的从来不是语法，而是动态增减内容时，auto-fit 的列数跳变引发视觉抖动，或 auto-fill 的隐形空列在 JS 动画中暴露占位问题——这时候得靠 grid-auto-flow: dense 或显式 grid-column 控制，不能只依赖 repeat 行为。
