gap在Grid布局中不继承，父子网格需各自声明；它纯粹作用于轨道间隙，避免margin引发的隐式轨道问题，且不影响grid-template-areas区域划分。
gap 在 Grid 布局中不继承，父子网格必须各自声明
很多人以为给父容器设了 gap: 1rem，子容器用 display: grid 后会自动继承这个间距——实际不会。gap 是独立作用于每个网格容器的，父子之间完全隔离。这意味着你得在每一层需要留空的地方显式写一次 gap。
常见错误是只在顶层加 gap，结果子模块内部项紧贴在一起，视觉上“塌陷”；或者反过来，只在子网格设 gap，却忘了外层模块之间也需要呼吸感。
- 父级网格控制「模块间距离」：比如
.homepage { gap: 24px; } - 子级网格控制「模块内组件间距」：比如
.card-grid { gap: 12px; } - 两者单位可以不同（
px/rem/em），互不影响
用 gap 替代 margin 是为了避开隐式轨道计算
如果你用 margin 给网格项手动加空隙，Grid 会把 margin 当作元素自身的一部分，可能触发隐式行/列轨道（implicit grid tracks），尤其在配合 grid-auto-flow: dense 或内容动态增删时，布局容易错位或高度异常。
而 gap 是纯粹的“轨道间隙”，它不改变任何项的盒模型，也不影响 grid-column / grid-row 的起止线计算，响应式重排也更稳定。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 错误写法：
.item { margin: 8px; }→ 可能撑开容器、破坏对齐 - 正确写法：
.grid-container { gap: 8px; }→ 空隙干净、可预测 - 注意：
gap对grid-auto-rows和minmax()无干扰，但margin会影响
gap 与 grid-template-areas 配合时，命名区域不能跨 gap
当你用 grid-template-areas 划分首页模块（如 "header header" "sidebar main"），gap 是加在「轨道之间」的，不是加在「区域之间」。也就是说，gap 不会把两个命名区域撑开——它只作用于实际生成的网格线之间。
如果发现 header 和 sidebar 之间没空隙，问题不在 gap 失效，而在于你没让它们落在不同轨道上。例如下面这段代码：
.container {
display: grid;
grid-template-areas: "header" "sidebar" "main";
grid-template-rows: auto auto 1fr;
gap: 16px;
}
这里 gap 确实生效，但只出现在 header 和 sidebar 之间、sidebar 和 main 之间。如果你希望 header 下方有更大留白，得靠 grid-template-rows 中的空轨道（比如 auto 16px auto 1fr），而不是指望 gap 跨区域起作用。
移动端响应式中 gap 的缩放要谨慎
gap 支持所有长度单位，但用 rem 或 em 时要注意根字体大小是否随屏幕缩放调整。比如你在 @media (max-width: 768px) 里把 html { font-size: 14px; }，那原本 gap: 1.5rem 就从 24px 变成 21px——看似合理，但若子网格也用了 rem，缩放可能不一致。
- 推荐方案：外层用
px（如gap: 24px）保绝对间距，子模块用rem（如gap: 0.75rem）适配文字流 - 避免全用
%或vw，gap 不支持百分比单位（会报无效值） - 测试点：在 iOS Safari 和 Chrome DevTools 设备模拟中检查 gap 是否被截断或倍增
