gap 不会透传，父子网格的 gap 完全独立：gap 仅作用于当前容器的直接子元素之间，子网格必须显式声明自身 gap，不可依赖父级传导，且需用 CSS 变量统一管理以保障一致性。
gap 不会透传，父子网格的 gap 完全独立
很多人以为给父容器设了 gap: 12px，子容器里的子项也会自动继承这个间距——这是错的。gap 只作用于**当前容器的直接子元素之间**，不会向下穿透到孙子层。子网格哪怕也用了 display: grid，它的 gap 必须单独声明，否则就是 0。
常见错误现象：.parent { display: grid; gap: 16px; } 里嵌了一个 .child-grid，结果子网格内部项挤在一起，看起来“gap 没生效”。
- 子网格必须显式设置自己的
gap，例如.child-grid { display: grid; gap: 8px; } - 不能靠父级
padding或margin模拟子项间隙——那会破坏对齐、干扰响应式行为 - 如果子网格是动态生成的（比如 Vue/React 组件），记得把
gap写进组件自身样式，别指望父容器“传导”
深层嵌套时，用 CSS 变量统一管理 gap 值
手动给每层都写死 gap: 12px 很容易不一致，尤其跨多个组件或团队协作时。推荐用 CSS 自定义属性集中控制：
:root { --grid-gap: 12px; }.parent-grid { display: grid; gap: var(--grid-gap); }.child-grid { display: grid; gap: calc(var(--grid-gap) / 2); }
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 变量名要语义化，比如
--layout-gap-sm/--layout-gap-lg，避免魔数 - 用
calc()做比例缩放比硬写6px更易维护，也方便后续主题切换 - 注意：IE 不支持
gap，变量本身能解析，但gap属性会直接被忽略——需要 fallback 方案（如margin+:not(:last-child)）
不是所有嵌套都需要 gap：警惕“伪嵌套”场景
有些所谓“多层布局”，其实只是视觉嵌套，逻辑上并不需要多层 grid/flex。比如一个卡片列表，每张卡片内部有标题+描述+按钮——这三者通常属于同一网格项，不该再套一层 grid 来调间距。
- 优先用单层 grid +
grid-template-areas或grid-column/grid-row控制内部结构 - 卡片内间距用
padding+gap组合更轻量，例如.card { padding: 16px; } .card > * + * { margin-top: 8px; } - 滥用嵌套 grid 会导致重绘开销上升，尤其在滚动区域或动画中明显卡顿
Flex 容器里嵌 Grid，gap 还生效吗？
生效，但只限各自容器范围。比如 display: flex 的父容器设了 gap: 20px，它只管 flex 项之间的空隙；其中某个 flex 项是 display: grid，那它的 gap 只影响它自己的直接子项。
- flex 的
gap和 grid 的gap是同名不同实现，互不干扰 - 不要试图在 flex 项上设
gap——它不是 flex 容器，gap无效 - 若需统一控制整条流的间距，建议改用纯 grid 布局（
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))+gap）
深层嵌套时最容易被忽略的是：gap 的作用域边界非常严格，它不像 color 或 font-size 那样有继承性。你看到哪一层没间距，就去查那一层的容器有没有正确声明 display: grid 或 display: flex，以及是否漏写了 gap。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
