17370845950

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 替代固定像素下限，避免硬编码。