gap的写法必须「行先列后」，即第一个值为row-gap（行间距），第二个为column-gap（列间距）；常见合法写法包括单值、双值及normal，禁用无单位值或fr单位；Grid中兼容性好，Flex中需注意旧版Safari支持问题；不可与margin混用，且不触发重排但会减少子项可用空间。
gap 的写法和值顺序必须是「行先列后」
很多人写 gap: 1rem 2rem 却以为列间距是 1rem，结果布局错位——浏览器严格按规范解析：第一个值是 row-gap（行间距），第二个才是 column-gap（列间距）。这不是约定，是 CSS 标准定义。
常见合法写法：
-
gap: 12px→ 行距 = 列距 =12px -
gap: 0.5rem 1rem→ 行距0.5rem，列距1rem -
gap: 0 8px→ 行间无空隙，只在列之间留8px（适合竖向卡片流） -
gap: normal→ 等价于约1em，但行为不稳定，不建议依赖
别用 gap: 1 这种没单位的写法，它非法；也别写 gap: calc(1rem - 2px) 1fr，1fr 不被允许用于 gap。
gap 在 Grid 和 Flex 中的兼容性差异
gap 在 Grid 布局中从 Chrome 57、Firefox 52、Safari 10.1 起就已稳定支持；但在 Flex 布局中，直到 Chrome 85、Firefox 63、Safari 14.1 才真正可用。如果你的项目需支持 Safari 13 或更早版本，gap 在 Flex 容器里会直接失效。
此时可降级使用单独属性：
- Grid 容器：仍可用
row-gap/column-gap（Safari 10.1+ 支持） - Flex 容器：老 Safari 不认
gap，也不支持row-gap/column-gap，只能靠margin模拟（但要手动处理首尾项）
注意：grid-row-gap 和 grid-column-gap 是旧名，已废弃，但仍有兼容性；现代代码应统一用 row-gap 和 column-gap。
别混用 gap 和 margin，尤其别指望它们“叠加对齐”
在 Grid 容器里，gap 是容器级控制项之间空隙的唯一正道；而子元素自己设 margin，只会额外增加空隙，还可能造成视觉错位——比如某卡片加了 margin-bottom: 10px，又遇上容器 row-gap: 12px，实际间隔变成 22px，且最后一行下方多出不该有的空白。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
调试时建议：
- 先清空所有子项的
margin和padding - 只用
gap统一控制间隔 - 若需首尾不留空，改用
row-gap单独设，或用grid-auto-flow: dense配合定位避开
另外，gap 不触发重排（reflow），但它会减少子项的可用空间。例如 grid-template-rows: repeat(3, 1fr) + gap: 20px，实际占用的垂直间隙是 2 × 20px = 40px（3 行只有 2 个行间隙），这点常被忽略，导致高度计算偏差。
gap 和 justify-content / align-content 不是一回事
有人以为设了 gap: 20px 再配 justify-content: center，就能让每行内容“整体居中并带间隔”，其实不是。gap 插入的是轨道之间的固定空隙，它不随对齐方式缩放或偏移；justify-content 控制的是整个网格轨道块在容器主轴上的位置，两者互不影响。
想实现“首尾无 gap、中间有间隔”，不能靠对齐，得用：
-
row-gap: 20px单独控制（列同理） - 或放弃
gap，改用grid-row: 1 / 2+grid-row: 2 / 3等显式定位，再靠margin微调（不推荐，维护成本高）
真正卡住人的从来不是语法记不住，而是忘了：gap 是容器属性、只作用于相邻轨道之间、不继承、不参与尺寸计算，而且 IE 完全不支持——如果还要兼容 IE，Grid 本身就不该用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
