column-gap 仅在启用多列布局（如设置 column-count 或 column-width）的容器上生效，对 flex、grid、table 无效；需用 gap 或 border-spacing 替代，且须注意单位、兼容性及内容长度影响。
column-gap 不是“设了就生效”的属性，它只在真正启用多列布局的容器上起作用——也就是说，你必须先让浏览器进入多列上下文，否则这行 CSS 会被静默忽略。
为什么 column-gap 单独写没反应
常见错误是只写：column-gap: 20px，却不配合 column-count 或 column-width。浏览器根本没把容器当成多列容器，自然不解析 column-gap。
- 必须显式触发多列：至少设置
column-count: 2或column-width: 250px -
column-gap在<table>、display: flex、display: grid容器上完全无效（这些场景该用gap或border-spacing） - Firefox 73+、Chrome 107+、Safari 15.4+ 支持标准写法；更老版本需加前缀如
-webkit-column-gap
column-gap 和 gap 到底该用哪个
看容器的 display 类型：
- 多列布局（
columns/column-count/column-width）→ 用column-gap - Grid 布局（
display: grid）→ 用column-gap或简写gap（如gap: 10px 20px） - Flex 布局（
display: flex）→ 只能用gap，column-gap无效 -
<table>→ 两个都不管用，改用border-spacing（配合border-collapse: separate）
移动端适配时 column-gap 容易踩的坑
固定值在小屏上常显得过宽，比如 column-gap: 24px 在 375px 宽屏幕上占比超 6%，挤压内容。但百分比（如 5%）在多列布局中被浏览器直接忽略。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
clamp(0.5rem, 2.5vw, 1.5rem)+ CSS 变量，例如：column-gap: clamp(0.5rem, 2.5vw, 1.5rem) - 避免和
column-rule冲突：若设了column-rule: 1px solid #eee，column-gap建议 ≥ 20px，否则视觉上像没间隙 - 内容太短时，浏览器会自动退化为单列，此时
column-gap不参与渲染——测试务必用足够长的文本或伪元素撑开高度 -
break-inside: avoid必须加在子元素上，否则长图/段落被截断，column-gap的视觉节奏就全乱了
单位选 px、rem 还是 em
rem 是目前最稳妥的选择：
-
px缩放时可能卡顿（尤其系统级字体缩放） -
em会继承父级font-size，如果某层写了font-size: 0.875em，column-gap: 2em实际只剩 1.75em -
rem只依赖根字体大小，缩放、响应式切换都一致，且clamp()与之搭配天然兼容 - 极小值慎用：低于
0.25rem在部分浏览器可能四舍五入为 0
真正容易被忽略的是：没有所谓“通用列间距”。column-gap 的生效前提不是“有列”，而是“明确告诉浏览器：我要多列布局”。漏掉触发条件，再调参数也没用。
