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 混淆了布局逻辑。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！