选auto-fit，除非明确需预留空列；auto-fit丢弃空轨道使卡片均分空间、撑满容器，auto-fill则强制保留空轨道导致留白或滚动。

选 auto-fit，除非你明确需要预留空列位置——这是卡片类布局最核心的判断依据。

本质区别：空轨道是否真实存在

auto-fill 会按 minmax() 的最小宽度，尽可能多地生成列轨道，哪怕没内容也占位；auto-fit 只建够用的列，把空轨道直接丢弃，剩余空间由有内容的列均分。

• DevTools 里打开 Grid 面板，勾选 “Show track sizes”：auto-fill 显示更多列线，auto-fit 只显示实际有内容的列数
• auto-fill 的空轨道参与 gap 计算、影响 tab 键序、会被屏幕阅读器识别；auto-fit 的空轨道彻底不存在
• 右侧留白、意外横向滚动、列数跳变（比如缩放时从 3 列突变成 2 列），大概率是误用了 auto-fill

什么场景该用 auto-fill

只在需要“预占位”的场合才用 auto-fill：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 拖拽式仪表盘（提前画好格子，后续 JS 插入组件）
• 日历视图（每周固定 7 列，即使某天无事件也要留空）
• 需 nth-child 精确控制样式或动画对齐的固定网格结构

为什么 auto-fit 是卡片布局默认选择

它让卡片真正“随宽换列、撑满容器”：

• 2 张卡、800px 宽、minmax(250px, 1fr) → auto-fit 出 2 列（各 400px）；auto-fill 出 3 列（前 2 张占位，第 3 列空着，右侧白 250px）
• 子项数量变化时，auto-fit 自动重排不跳动；auto-fill 列数恒定，但空列可能挤压内容
• 配合 grid-auto-rows: minmax(min-content, auto)，还能防止高度不一致的卡片塌陷

常见失效原因和调试方法

写了 auto-fit 却只出一列？不是语法错，而是计算条件不满足：

• 父容器没显式宽度（如 flex 容器中未设 flex: 1 或 width: 100%）
• 卡片自身设了 width / min-width / max-width，阻断了 Grid 的弹性收缩
• gap 没被计入 minmax 下限：可用宽 = 容器宽 − (列数−1)×gap，建议写成 minmax(calc(280px + 1rem), 1fr) 并保留 gap: 1rem
• 浏览器开发者工具中看 computed styles → grid-template-columns，若显示为 1fr 而非 1fr 1fr，说明 minmax 未生效或容器宽为 0