column-gap 必须与 column-width 或 column-count 一起使用才能生效，单独设置无效；它仅控制列间水平间隙，不影响上下间距、容器边缘或 padding，且需注意浏览器兼容性与单位选择。
column-gap 必须和 column-width 或 column-count 一起用
单独写 column-gap 不会产生任何效果，浏览器根本不会进入多列布局模式。它不是独立生效的布局属性，而是「列布局上下文」中的修饰项。
常见错误写法：.list { column-gap: 16px; } —— 这行 CSS 完全被忽略
正确做法是至少启用一种列生成机制：
-
column-width: 250px：推荐用于响应式，浏览器按最小宽度自动算列数，缩屏时自然减列 -
column-count: 3：适合固定列数场景，但小屏易溢出，需配合媒体查询 - 二者别同时设，否则
column-width优先级更高，column-count可能被忽略
column-gap 和 margin-bottom 不是同一层控制逻辑
column-gap 只管列与列之间的水平空隙，对每个 item 的上下距离毫无影响。瀑布流中 item 垂直方向的间距必须靠 margin-bottom。
容易踩的坑：
- 写
margin-top：首项顶部会多出空白；且:first-child在多列中不等于“视觉首项”，不可靠 - 同时设
margin-top和margin-bottom：相邻 item 垂直间距翻倍 - 漏掉
break-inside: avoid：长图或块级元素被截断后，margin-bottom可能出现在列中间，破坏节奏
column-gap 单位选 px 还是 em？
推荐优先用 px，尤其是内容以文字为主时。虽然 em 能随字体缩放，但在多列中会导致列宽计算不稳定——column-width 是基于容器宽度和字体无关的物理尺寸推算列数的，混用相对单位容易让列数抖动。
normal 值理论上等价于 1em，但实际渲染受浏览器实现影响较大，Chrome 和 Safari 表现不一致，生产环境慎用。
如果真要响应式缩放间距，建议用媒体查询分段控制：@media (max-width: 768px) { .content { column-gap: 12px; } }
column-gap 不影响容器边缘，也不叠加 padding
column-gap 的作用范围严格限定在列与列之间，它不会给容器左右加额外留白，也不会和 padding 相加。如果你发现内容贴边难看，那是 padding 没设，不是 column-gap 的问题。
另外注意：column-gap 和 gap（Grid/Flex）命名相似但互不兼容。在 display: grid 容器里写 column-gap 无效，得用 gap 或 column-gap（Grid 中也支持该属性，但语义不同）。
最常被忽略的一点：旧版 Safari 和 iOS WebKit 需要 -webkit-column-gap 前缀，2026 年仍有不少存量设备依赖它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
