gap仅在grid或flex容器中生效，column布局需用column-gap；瀑布流应采用auto-fill+minmax的grid方案，并配合-webkit-gap兼容旧Safari，首尾留白须用padding而非margin。

gap 在瀑布流中只对 grid 容器生效，flex 或 column 布局需另作处理

很多人试过在 column-count 或 flex 布局里直接加 gap，发现没反应——这是正常现象。gap 仅在 display: grid 或 display: flex 容器上起作用；而 column 布局（如 column-count: 3）虽支持 column-gap，但不认 gap 这个简写。移动端瀑布流若想用 gap 统一控距，必须走 grid 路线。

grid 瀑布流必须用 auto-fill + minmax，不能写死列数

写死 grid-template-columns: repeat(3, 1fr) 会导致小屏溢出或卡片被压扁。auto-fill 才是关键：

• grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) —— 最小 280px 保视频卡片可读，大屏自动均分
• 禁用 grid-auto-rows，让每张卡片按内容（如 aspect-ratio: 9/16）自然撑高
• 必须设 gap: 8px（或双值如 gap: 8px 12px），它控制的是**相邻卡片之间**的间隙，不和 margin 合并，也不影响首尾留白
• 别在卡片上再加 margin，否则视觉间距会变成 gap + margin 叠加，调试时容易误判

iOS Safari 下 gap 失效？检查是否漏了 -webkit-gap

Safari ≤15.4 不识别标准 gap，只认 -webkit-gap。如果你的瀑布流在 iOS 上间隙消失、卡片紧贴，大概率是这个原因：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 补全写法：gap: 8px; -webkit-gap: 8px;
• 注意：Safari 14.1+ 已原生支持 gap，但很多用户仍停留在旧系统，尤其企业内网设备
• 不用 row-gap/column-gap 单独写——它们在旧 Safari 中同样不被识别
• DevTools 的 “Computed” 面板里搜 gap，看是否显示为 unset 或未计算，就能快速定位是不是兼容性问题

gap 控制不了首尾留白，padding 才是正解

gap 只管子元素之间的空隙，不管容器边缘。瀑布流常出现“第一行顶到顶部”“最后一行贴底”的压迫感，这不是 gap 的锅，而是没处理首尾：

立即学习“前端免费学习笔记（深入）”；

• 给外层容器加 padding: 12px，左右上下都留白，比用 margin 更稳定
• 如果只想要上下留白（比如滚动区域需贴边），就用 padding-top 和 padding-bottom
• 千万别用 :first-child 或 :last-child 加 margin 模拟——动态插入新卡片时，这个 margin 会错位甚至消失
• gap 和 padding 是协作关系：gap 管“内距”，padding 管“外距”，混用不冲突

真正难的不是写对 gap，而是得同时确保卡片有 aspect-ratio 防塌陷、iOS 上加了 -webkit-gap、首尾用 padding 而非 margin——少一个，瀑布流就在某个环节抖一下、跳一下、错一下。