gap是CSS布局属性，不触发重排也无需防抖；所谓“gap防抖”实为误判，真正需解决的是图片/视频加载、列高重算和DOM插入时机问题。
gap 本身不触发重排，也不需要防抖——它不是事件或函数，而是 CSS 布局属性。所谓“gap 防抖”，实际是误把「瀑布流动态加载时因高度突变导致的视觉抖动」归因于 gap。真正要处理的是图片/视频加载、列高重算、DOM 插入时机这三件事。
为什么加了 gap 还会闪跳
常见错误现象：新卡片插入后，整列内容上移、图片突然“弹高”、相邻列间距忽大忽小。
-
gap值没变，但子项高度在加载前后剧烈变化（比如图片从 0 → 自然高），导致 Grid 行高重算、列间对齐错位 - 用
column-count实现瀑布流时，浏览器按文本流切分，图片未加载完高度为 0，后续内容提前掉进下一列，加载完成再回流，column-gap看着“跳” - JS 动态插入卡片时，没等图片尺寸就 append，列高数组记录失真，下一张总插错列，视觉上像间距乱跳
gap 在移动端必须拆开写
Safari 14.0–14.4（仍占约 3% 用户）完全忽略 gap: 8px 这类简写，但支持 row-gap 和 column-gap。不拆开，真机上就等于没设间距。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 安全写法：
row-gap: 8px; column-gap: 8px;—— 所有现代移动浏览器都认 - 别加
-webkit-gap，Safari 14.0 中它也无效 - 如果只想要水平间距（如横向滚动导航），写
row-gap: 0; column-gap: 12px;，别混用gap简写和独立属性
动态加载时控制间距稳定的实操点
关键不是调 gap，而是让子项高度可预期、插入可预测。
立即学习“前端免费学习笔记（深入）”；
- 所有卡片容器强制设
aspect-ratio: 9/16（短视频）或aspect-ratio: 4/3（图集），避免加载前高度塌陷 - JS 插入新卡片前，先用
new Image()预加载，拿到naturalWidth/naturalHeight，再按目标列宽反推渲染高度，更新列高数组 - 用
IntersectionObserver触发加载，但观察目标必须是卡片容器（不是img标签），且threshold: 0.1防止临界帧漏判 - 避免在子项上设
margin—— 它会被 Grid 或 Columns 当作尺寸一部分计算，导致列数意外减少；所有留白靠gap+ 容器padding
最容易被忽略的是：gap 只定义子项之间距离，它不管容器边缘。动态加载后若首尾贴边、中间却有空隙，问题不在 gap，而在父容器缺 padding 或子项用了 margin 混淆了布局逻辑。
