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 沙箱 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——少一个，瀑布流就在某个环节抖一下、跳一下、错一下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
