column-gap不生效是因为容器未启用多列模式；必须设置column-count或column-width等触发属性，且display需为multi-column，内容足够长，避免与gap混用，单位推荐rem，Safari≤14.1需加-webkit前缀。
直接写 column-gap 没反应，八成是容器压根没进入多列模式——它不是“设了就生效”的属性，必须先激活多列上下文。
为什么 column-gap 不生效？常见失效场景
浏览器只在明确启用多列布局的容器上解析 column-gap。以下情况会让该属性完全被忽略：
-
display是block、flex或grid，但没配column-count或column-width - 写了
column-gap却漏掉columns: 3或column-count: 2这类触发器 - 容器内内容过短，浏览器判定“不够分列”，自动退化为单列（此时
column-gap仍不参与渲染） - 用了
gap（Grid/Flex 专用）和column-gap混写，而容器实际走的是 Grid 布局，后者被静默丢弃
column-gap 的单位选什么？px / em / rem 怎么取舍
单位直接影响响应性和可维护性，不是随便挑一个就行：
-
px最直观，但缩放页面时固定像素会失真，尤其对视力辅助用户不友好 -
em依赖父元素font-size，若容器本身设了font-size: 0.875em，那column-gap: 2em实际只有约1.75em，容易误判 -
rem推荐优先用：基于:root字体大小，不受嵌套影响，配合html { font-size: clamp(16px, 1.2vw, 18px); }能自然响应 - 百分比（
%）在多列中无效，直接被浏览器忽略，别试 - 极小值慎用：
column-gap: 0.1rem在部分浏览器中会被四舍五入为0，实测建议不低于0.25rem
兼容性怎么兜底？前缀要不要加、加哪些
2026 年主流浏览器已原生支持 column-gap，但 Safari ≤ 14.1（macOS Big Sur 及更早）仍需前缀，且 Autoprefixer 对此补全不完整：
- 必须显式写两行：
column-gap: 2rem;和-webkit-column-gap: 2rem; - Firefox 旧版本（-moz-column-gap，但当前市占率极低，可按项目目标用户决定是否保留
- Safari ≥ 15.4 可省略前缀；若需兼容 macOS 11/12 用户，
-webkit-前缀仍是刚需 - 别依赖
gap的前缀逻辑去推断column-gap——它们属于不同模块，前缀策略不一致
和 column-rule 一起用时，视觉间距到底算多少？
column-rule 不是叠加在 column-gap 外面，而是居中画在 gap 区域内，实际空白会被“吃掉”一部分：
- 例如：
column-gap: 20px;+column-rule: 2px solid #ccc;→ 两侧各剩9px空白，中间2px是线 - 若想保持纯空白无分割线，干脆不设
column-rule - 若要强调分隔，把
column-gap设大些（比如32px），再配column-rule: 2px，避免拥挤感 -
column-rule不触发重排，但细线+窄 gap+小字号容易让文本视觉串列，这点常被忽略
真正容易被忽略的是：多列布局的列高由 column-fill: balance 控制，而 column-gap 的值会参与列容器总高度计算——即使内容没填满，gap 依然存在，最后一列可能明显变短，看起来像错位，其实只是高度没撑开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
