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——它真正实现“有多少内容就占多少空间”，且自动拉伸填满整行。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• 常见写法：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 替代固定像素下限，避免硬编码。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！