column-gap 仅控制列轨道间隙，无法修复因子元素 margin/padding/border 或容器无内边距导致的视觉错位；需配合 padding-inline、box-sizing 等协同调整。
column-gap 不能直接修复“盒模型间距不均”——它只控制列轨道之间的间隙，不处理子元素自身的 margin、padding 或 border 导致的视觉错位。真正出问题的地方，往往在子项内部或容器边界。
为什么 column-gap 看起来没起作用
常见现象是：设了 column-gap: 20px，但首列左边空得少、末列右边空得多，或者中间列距忽大忽小。
- 你可能在用
display: block或float布局——column-gap对它们完全无效 - 你实际用的是 CSS Columns（
column-count），却误写了gap而非column-gap；CSS Columns 不支持gap - 子项自带
margin（比如卡片组件默认有margin-bottom: 16px），和column-gap叠加，造成垂直方向“双倍留白” - 容器没设
padding-inline，导致首末列紧贴边缘，视觉上“不居中”
column-gap 在不同布局中的生效条件
同一属性名，在不同上下文行为完全不同：
- CSS Columns（
column-count/column-width）：column-gap是唯一合法方式，gap会被忽略；需兼容旧 Safari 时加-webkit-column-gap - CSS Grid：
column-gap有效，也可用简写gap: 16px 24px（行距 列距）；gap会同时覆盖row-gap和column-gap - CSS Flex：
column-gap仅在flex-direction: row且flex-wrap: wrap时控制**同一行内**水平间距；它不控制“列”概念，Flex 里没有真正的“列轨道” - 普通流式布局（
display: block）：column-gap完全无效，浏览器直接丢弃该声明
修复首尾列“不对齐”的真实操作
这不是 column-gap 的 bug，而是容器内边距缺失造成的视觉误差。别靠 margin 去“手动对齐”子项。
- 给容器加
padding-inline: calc(var(--col-gap) / 2)，例如column-gap: 30px→padding-inline: 15px - 避免用
padding-left/padding-right，改用padding-inline适配 RTL 场景 - 如果内容是文字块（非卡片），检查是否启用了
break-inside: avoid，它可能导致某列被强制截断，破坏列宽一致性 - 确认没意外设置
column-fill: balance（默认值），在内容不均时它会主动拉伸某列高度，放大视觉偏差
当 column-gap 被迫降级为 margin 时的关键避坑点
IE 或极老 Android Webview 必须放弃 column-gap 时，margin 模拟不是简单加个 margin-right 就完事。
- 用
.item:not(:last-child) { margin-right: 16px; }，而非:last-child { margin-right: 0; }—— DOM 顺序 ≠ 渲染顺序，尤其在flex-wrap下 - 垂直方向若需模拟
row-gap，不要用margin-bottom，改用容器padding-block+ 子项margin-block-end组合，否则换行后末行底部会多出空白 - 动态增删子项时，
:not(:last-child)自动更新，但若用 JS 手动插入元素，需确保插入后触发样式重计算（如强制offsetHeight读取） - 所有子项必须用
box-sizing: border-box，否则padding和border会撑宽导致列数崩塌
column-gap 本身很干净，问题永远出在它周围的盒模型干扰上——子项的 margin、容器的 padding 缺失、布局模式误判，才是间距不均的真正源头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
