column-gap必须搭配column-width，因为该属性仅在多列布局上下文中生效；单独设置无效，而column-width能触发浏览器自动计算列数，实现响应式，避免column-count死锁列数。
column-gap 在瀑布流中为什么必须搭配 column-width？
直接写 column-gap 没效果，是因为浏览器根本没进入多列布局模式。column-gap 不是独立生效的属性，它只在启用 column-count 或 column-width 后才起作用。用 column-width 而非 column-count 才是响应式关键：前者让浏览器按最小列宽自动算列数，后者会死锁列数导致小屏溢出。
常见错误是写成：
.masonry {
column-gap: 16px; /* 单独这行无效 */
}
正确姿势是：
-
column-width: 250px—— 设定理想列宽，视口缩小时自动减列 -
column-gap: 16px—— 此时才真正控制列与列之间的空隙 - 不设
column-count，否则响应式失效
column-gap 和 margin-bottom 怎么分工才不打架？
column-gap 只管列和列之间的水平空隙，完全不管每个 item 内部的上下距离。item 垂直方向的间隙必须靠 margin-bottom，且只能设一个方向。
容易踩的坑：
- 写
margin-top：首项顶部会多出空白，且:first-child在瀑布流里不等于“视觉第一项”，不可靠 - 同时写
margin-top和margin-bottom：相邻 item 间距翻倍 - 漏掉
break-inside: avoid：长图被截断后，margin-bottom可能出现在列中间，破坏节奏
推荐写法：
.masonry > * {
break-inside: avoid;
margin-bottom: 16px;
}
column-gap 单位选 px、rem 还是 em？
用 px 看着准，但用户缩放页面时会卡顿；用 em 容易被父级 font-size 带偏（比如容器设了 font-size: 0.875em，column-gap: 2em 实际只剩 1.75em）；rem 是最稳的选择——它只依赖根字体大小，缩放、响应式切换都一致。
还要注意：
-
column-gap不支持百分比（如5%），写了也无效 - 极小值慎用：
0.1rem在某些浏览器可能四舍五入为 0，实测建议不低于0.25rem - 单位最好和
margin-bottom统一，避免缩放时视觉错位
为什么 Safari/Chrome 有时 column-gap 看不见？
不是 bug，是兼容性细节没对齐。Firefox 73+、Chrome 107+ 才完全支持标准 column-gap 语法；更早版本需加前缀 -moz-column-gap 或 -webkit-column-gap。但当前（2026 年中）已可放心用标准写法，前提是确认没混用 display: grid 或 flex。
另一个高频原因：
- 容器同时写了
display: grid和column-width—— 后者会被忽略，column-gap自然不生效 - 用了
gap又写column-gap—— 概念混淆，gap在多列布局中完全无效 - 父容器有
overflow: hidden且子项高度超限，把右侧列间隙裁掉了
调试时先检查 computed styles，确认 columns 是否已触发，再看 column-gap 是否被计算为有效值。
最易被忽略的一点：瀑布流里没有“最后一列”的稳定 DOM 标识，所有基于 :nth-child 的 margin 修复都是临时补丁，长期维护成本高。老实用 column-width + column-gap + margin-bottom 这套组合，边界清晰，浏览器行为可预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
