column-gap 设置无效是因为未启用多列布局，必须配合 column-count 或 column-width 使用；在 flex/grid 中它被 gap 取代，且浏览器兼容性及单位选择（推荐 rem）也影响效果。
column-gap 设置无效？检查是否启用了多列布局
直接写 column-gap: 20px 没反应，大概率是因为元素根本没进入多列模式。CSS 多列不是默认行为，必须显式触发。
- 必须设置
column-count（如column-count: 3）或column-width（如column-width: 200px），否则column-gap完全不生效 -
display: flex或display: grid的容器下，column-gap是另一个含义（对应gap），和多列无关；这里要的是columns相关属性 - 注意浏览器兼容性：
column-gap在多列上下文中，Firefox 从 73+、Chrome 107+ 才完全支持标准语法；旧版本需用-moz-column-gap
column-gap 和 gap 的区别与混用风险
同一个 CSS 类里同时写了 gap 和 column-gap，结果间距不对——这是典型的概念混淆。
-
gap是 Grid/Flex 布局的专用属性，控制子项之间的间隙；它在多列布局中**不生效** -
column-gap是columns模块的属性，只对column-count/column-width触发的多列生效 - 如果容器既设了
display: grid又设了column-count，后者会被忽略，此时column-gap形同虚设 - 简例：
.text { columns: 3; column-gap: 1.5em; } /* 正确 */.grid { display: grid; gap: 1.5em; column-gap: 1.5em; } /* column-gap 被忽略 */
column-gap 单位选 em、rem 还是 px？
用 px 看着准，但一缩放就露馅；用 em 又容易被嵌套字体大小带偏。
- 推荐优先用
rem：基于根字体大小，响应式友好，且不受父级font-size干扰 - 慎用
em：若文本容器本身设置了font-size: 0.875em，那column-gap: 2em实际只有 1.75em，容易误判 - 避免用百分比（
%）：多列中column-gap不支持百分比值，会直接失效 - 注意最小间距限制：某些浏览器对极小值（如
column-gap: 0.1rem）可能四舍五入为 0，实测建议不低于0.25rem
文字跨列断裂难读？column-gap 不是万能解
调大 column-gap 后，段落还是在不该断的地方断开，甚至单词被切成两半——这不是间距问题，是分列算法本身的行为。
-
column-gap只控制列之间空白，不影响内容断行逻辑 - 改善断裂需配合：
hyphens: auto（启用连字符）、break-inside: avoid（防元素内断）、orphans/widows（控制段首尾行数） - 特别注意：中文几乎不触发
hyphens，所以对中文字体，更依赖break-after/break-before显式控制断点 - 如果内容是代码或 URL，加
overflow-wrap: break-word比调column-gap更治本
多列布局的“列间距离”表面看只是个数值，背后绑着布局模式、单位继承、渲染引擎差异和内容断行规则——漏掉其中一环，column-gap 就成了摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
