column-gap仅在启用多列布局（columns/column-count/column-width）的块级容器中生效，对flex/grid无效；其值按容器宽度计算百分比，normal约1em；响应式下需配合媒体查询避免列数异常。
column-gap 在多列布局中只起作用，不是万能间距工具——它对 display: flex 或 display: grid 容器完全无效，写了也白写。
为什么写了 column-gap 却没看到间距？
最常见原因是：容器根本没启用多列布局。CSS 多列（Multi-column Layout）是一套独立模块，必须显式触发才能生效。
-
column-count、column-width或columns三者至少设一个，否则column-gap不会被解析为有效声明 - 检查元素是否是块级容器（
div、section等），span、a这类内联元素默认不支持多列 - 确认没有被其他样式覆盖，比如
display: inline-block或float会破坏多列上下文 - IE 全系不支持，如果需兼容旧浏览器，得换方案（如 Flex/Grid + 手动分段）
column-gap 的合法取值和实际表现
它接受长度值、百分比和 normal，但计算逻辑和你直觉可能不一样：
-
column-gap: 20px：固定像素，最常用，行为稳定 -
column-gap: 2%：按容器的**内联尺寸**（即 width）计算，不是子项宽度；小容器下可能过窄，大屏下可能过宽 -
column-gap: normal：规范定义为约1em，但各浏览器实现略有差异，Chrome 是12px左右，Firefox 略大 - 注意：
column-rule绘制的线位于column-gap的中间，不额外占空间；想加粗分隔线又保留原间距，得先加大column-gap
别把 column-gap 和 gap 混用
名字像，但底层机制完全不同，混用会导致预期外失效：
- 在
display: flex容器里写column-gap：浏览器静默忽略，不报错也不生效；该用gap或row-gap/column-gap（Flex 中后者是gap的别名，仅 Chrome/Firefox 支持，非标准） - 在
display: grid容器里写column-gap：现代浏览器会映射到gap行为，但这是兼容性补丁，不能依赖；标准写法是gap或column-gap（Grid 中是正式属性） - 唯一真正“认”
column-gap的，只有启用了多列的display: block（或默认 display）容器
响应式多列布局中 column-gap 的坑
用 column-width 实现流式列数时，column-gap 的固定值可能导致小屏列数骤减甚至只剩一列：
- 例如设了
column-width: 250px+column-gap: 40px，容器宽度低于250px + 40px = 290px时，连一列都塞不下（因为 gap 也要算进可用宽度） - 推荐搭配媒体查询：小屏下设
column-count: 1并重置column-gap: 0，避免空白撑开容器 -
column-span: all的标题或图片会跨所有列，但它不参与列宽/间隙计算，所以不会挤压文本列——这点常被忽略，导致视觉错位
gap 配合 Grid/Flex 更可靠；column-gap 只适合纯文本流分栏场景，且必须从 columns 或 column-count 起手。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
