auto-fill 不填满容器，只按最小宽度计算列数并保留空轨道；放大屏幕时因列数不变而每列1fr变大，导致右侧留白更明显。
auto-fill 本身不“填满”，它只按最小宽度硬算列数，空轨道真实存在、参与分配——留白是设计行为，不是 bug。
auto-fill 为什么放大屏幕反而出现右侧留白
它根本不看内容数量，只做一件事：用 minmax() 的第一个参数（比如 280px）去除容器宽度，向下取整得出最大列数。例如容器宽 900px，minmax(280px, 1fr) → 900 ÷ 280 ≈ 3.2 → 取整为 3 列。哪怕你只放 1 个卡片，剩下 2 条轨道依然被创建、占位、分走 1fr 空间，并计入 gap 计算。
- 空轨道会均分剩余空间：所有列（含空）都拿
1fr，有内容的项被压缩变窄 - gap 先扣再算：3 列有 2 个
gap，实际可用宽度 = 容器宽 − 2 ×gap，进一步加剧留白感 - 放大屏幕时列数不变，但每列
1fr分到的空间变大，空轨道视觉占比更明显
为什么调试时 DevTools 显示列线多但内容只占几格
因为 auto-fill 生成的是**显式轨道**，不是“画布”。这些轨道在布局计算阶段就已固定，即使没子元素放入，它们仍存在于 grid-template-columns 的轨道定义中，影响 grid-column-start/end 计算、tab 键序、屏幕阅读器遍历，甚至 JS 中 getComputedStyle().gridTemplateColumns 返回的值里也包含它们。
- 删掉所有子元素后，列线数量不变——这是验证是否真由
auto-fill导致留白的最快方式 - 用 DevTools Grid 面板勾选 “Show track sizes”，缩放时看列线是否跳变：不跳变 =
auto-fill；跳变 =auto-fit - 空轨道不会触发
:empty伪类，也无法用:nth-child选中，但会响应grid-column显式定位
怎么让 auto-fill 不留白（或至少可控）
除非你明确需要结构稳定（如仪表盘插槽、日历格子），否则 auto-fill 在内容驱动型布局中本就不该用于“填满”目的。若必须保留 auto-fill，可收敛其副作用：
- 把
gap算进minmax()下限：minmax(calc(280px + 1rem), 1fr)，再单独设gap: 1rem，避免空轨道凭空多占间隙 - 禁用空轨道的视觉干扰：加
grid-auto-flow: dense可减少跨行空白，但不消除空轨道本身 - 用
max-content替代1fr：minmax(280px, max-content)让空轨道收缩至最小，但需确保子项宽度可控（否则可能撑破容器） - 真正要填满？换
auto-fit——它会丢弃空轨道，让有内容的列直接均分整行
最常被忽略的一点：动态增减内容（比如搜索过滤、分页加载）时，auto-fill 的空轨道不会自动消失，JS 中通过 grid-column 或 offsetLeft 获取位置可能拿到“存在但不可见”的坐标，导致动画错位或对齐失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
