<p>必须用 column-gap 而非 gap 控制多栏列间距，因为 gap 仅适用于 flex/grid；column-gap 需配合 column-count 或 column-width 触发，且 Safari≤14.1 需加 -webkit- 前缀。</p>
不能用 gap 设置多栏（multi-column）布局的列间距。它压根不生效——gap 在多列上下文中被浏览器忽略，必须用 column-gap。
为什么 gap 在多列中完全无效
gap 是为 display: grid 和 display: flex 设计的，不是为 columns 模块准备的。即使你写了 columns: 3; gap: 2rem;，浏览器会安静地跳过 gap 这一行，只按默认列间距渲染。
常见错误现象：
- 写了
gap却没看到任何列间空白 - 误以为是单位或前缀问题，反复调试却找不到原因
- 和
margin混用，结果列内容被整体外推，而非列与列之间留空
column-gap 必须配合 column-count 或 column-width 才能激活
多列模式不是“设了 column-gap 就自动开启”，它需要明确触发。没有触发器，column-gap 就是废代码。
立即学习“前端免费学习笔记（深入）”；
-
column-count: 3或column-width: 200px是硬性前提 -
display必须是block（默认）或inline-block；设成flex或grid会直接禁用多列逻辑 - 内容长度不够时，浏览器可能只渲染一列，此时
column-gap也不参与计算
column-gap 的单位和兼容性要手动兜底
2026 年主流浏览器已支持标准 column-gap，但 Safari ≤ 14.1（macOS Big Sur 及更早）仍需 -webkit-column-gap，且 Autoprefixer 不会自动补全这一项。
- 必须显式写两行：
column-gap: 1.5rem;和-webkit-column-gap: 1.5rem; - 推荐用
rem：不受嵌套font-size影响，配合html { font-size: clamp(16px, 1.2vw, 18px); }可自然响应 - 避免
0.1rem这类极小值——部分浏览器四舍五入为 0，实测建议 ≥0.25rem -
%在多列中无效，直接被丢弃，别试
别把 column-gap 和 margin 当成同一件事
column-gap 控制的是列内容区域之间的空白，不改变容器尺寸，也不影响首尾列到容器边缘的距离。而 margin 是推整个盒子的位置。
- 加
margin会让整块多列区域左右缩进，但列之间还是紧贴着 - 想让首尾列离容器边缘也有空隙？得靠
padding，不是column-gap - 如果同时用了
column-rule，注意它画在column-gap区域正中间——例如column-gap: 20px; column-rule: 2px solid #ccc;，实际每侧只剩 9px 空白
最常被忽略的一点：多列布局的间隙控制，根本不在 gap 的职责范围内。写错属性名、漏掉触发器、依赖自动前缀——这三个动作加起来，基本覆盖了 90% 的“列间距不生效”问题。
