auto-fill 会保留空轨道以维持固定列数，auto-fit 则合并空轨道使内容拉伸占满；前者适用于预设占位的仪表盘，后者适合响应式卡片列表，且需注意 gap 对列数的影响。
auto-fill 和 auto-fit 的核心区别在哪
关键看容器有没有“剩余空间”：用 auto-fill 时，Grid 会按最小尺寸（如 minmax(200px, 1fr)）尽可能多地创建列，哪怕后面全是空轨道；而 auto-fit 会把空轨道合并掉，让已有网格项拉伸占满容器。
什么时候该用 auto-fill
适合需要“占位但不渲染内容”的场景，比如预设固定列数的仪表盘格子、带 hover 效果的空白卡片区域。它保证列数稳定，不会因内容增减导致布局跳动。
- 列定义写成
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))) - 即使只放 2 个子元素，也会生成 4 列（假设容器宽够），剩下两列为空
- 配合
grid-auto-flow: column可横向优先填满，但需注意溢出行为
auto-fit 更适合响应式卡片列表
绝大多数卡片式布局应选 auto-fit——它真正实现“有多少内容就占多少空间”，且自动拉伸填满整行。
- 常见写法：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))) - 当容器宽度不足 280px × 2 时，自动退为单列；足够时立刻变为双列、三列…
- 若子元素设置了
grid-column: span 2，auto-fit仍能正确计算剩余空间并调整列数 - 注意：IE 不支持
auto-fit，仅支持auto-fill（且行为略有差异）
容易被忽略的陷阱：gap 会影响 auto-fit 的列数计算
gap 被计入容器总宽，但 minmax() 的最小值只管单列宽度。如果没预留 gap 空间，可能意外少一列。
立即学习“前端免费学习笔记（深入）”；
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))); gap: 1rem;
上面这段代码在 920px 宽容器中本可塞下 3 列（3×300 = 900），但加上 2 个 gap（共 2rem ≈ 32px）后，实际可用宽度只剩约 888px，导致 Grid 回退到 2 列。解决办法是把 gap 算进 minmax 下限：
grid-template-columns: repeat(auto-fit, minmax(calc(300px + 1rem), 1fr))); gap: 1rem;
或者更稳妥地用 max-content 替代固定像素下限，避免硬编码。
