column-gap专用于多列布局的列间间距，margin-bottom用于列内项的垂直间距；二者不可混用、不可替代，且必须按布局类型严格区分配置。
column-gap 控制列间距，margin 控制项内垂直间距；二者不能混用、不能互相替代，且必须按容器类型分开配置。
column-gap 是唯一合法的列间间距控制方式
在 column-count 或 columns 布局中，列与列之间的空隙只能由 column-gap 设置。写成 gap 或 margin 都无效——浏览器会直接忽略。
-
column-gap: 20px会让所有列等距分离，不依赖子元素数量或 DOM 顺序 - 不要试图用
:nth-child(3n)给某些 item 加margin-left模拟列间距，视觉上可能偶然对齐，但列数变化或数据增减后立即错乱 -
column-gap不影响列内 item 的排布，只作用于列容器的“列轨道”之间
item 内部垂直间距必须用 margin-bottom（且只设一个方向）
瀑布流里每个 item 的上下间距，本质是「列内纵向堆叠」产生的视觉间隙，只能靠 margin-bottom 实现。设 margin-top 会导致首项顶部多出空白，且无法规避 :first-child 在 DOM 顺序和视觉位置不一致的问题。
- 统一写
.item { margin-bottom: 16px; }，末尾项会多出一段空白，这是预期行为，可通过容器padding-bottom或伪元素抵消 - 避免同时设
margin-top和margin-bottom，否则相邻 item 间距会翻倍 - 务必搭配
break-inside: avoid-column，否则长 item 被截断后，margin-bottom可能出现在列中间，破坏节奏
Grid 瀑布流（masonry）下 gap 才真正生效
Firefox 当前支持 grid-template-rows: masonry，此时 gap（非 column-gap）可同时控制行列间距。但注意：这不是通用方案，其他浏览器仍需降级处理。
- 启用前必须确认容器是
display: grid，且显式声明grid-template-rows: masonry -
gap: 16px在此场景下等效于同时设置row-gap和column-gap - 若 item 使用
grid-row-end: span 2，gap仍会插入，但可能造成某两行之间出现双倍空隙，需人工校验视觉效果
JS 瀑布流库中禁止手动改 margin
像 Masonry、Isotope 这类库会在布局计算时读取元素当前的 margin 值并纳入尺寸推算。你插入新 item 后如果手动加 style.marginBottom，库可能误判高度，导致重排错位或间距消失。
- 所有间距必须通过库的配置项控制，例如 Masonry 的
gutter选项 - CSS 中只定义
.item的基础盒模型（padding、border），不写margin - 动态插入后调用
masonry.layout()，而非element.style.margin = '...'
最易被忽略的一点：column-gap 和 margin-bottom 的单位最好保持一致（都用 px 或都用 rem），否则在缩放或响应式切换时容易出现视觉节奏断裂——不是 bug，是两种间距机制在不同坐标系里独立运算的结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
