column-count仅能实现视觉近似瀑布流，非真正Masonry布局；因按文档流“切片分栏”，DOM与视觉顺序错位，仅适用于纯展示、无交互、卡片高度相近场景。
column-count 能实现视觉上接近瀑布流的效果，但不是真正按列高找最短列的 Masonry 布局——它按文档流顺序“切片分栏”，DOM 顺序和视觉位置天然错位。只适合纯展示、无交互依赖、卡片高度差异小的场景。
为什么 column-count 设了却还是单列？
核心原因就两个：容器没设 height 或 max-height，或者子项脱离了块级流。
- 浏览器看到无限高容器，直接退化为 1 列；必须加
max-height: 70vh（或具体值）才能触发分列 -
display: flex/display: grid/float/position: absolute的子项会破坏文档流，column-count完全失效 - Bootstrap 的
.row和.col类默认用 Flex，不能直接套在上面；得另起一个纯div容器
卡片被拦腰截断？一定是漏了 break-inside: avoid
这是 column-count 最典型的翻车现场：标题在左栏，图片跳到右栏底部。
- 必须对每个子项（如
.card）单独加break-inside: avoid，不能只写在容器上 - 兼容旧 Safari 需补前缀：
-webkit-column-break-inside: avoid；IE11 可加page-break-inside: avoid -
break-inside: avoid-column是无效写法，Chrome/Firefox 不识别 - 若子项用了
position: absolute，该声明彻底失效
column-gap 和 margin 混用会导致列高失衡
用 margin-bottom 模拟间距，会让浏览器误判子项实际高度，导致“最短列”判断出错，空隙忽大忽小。
立即学习“前端免费学习笔记（深入）”；
- 统一用
column-gap: 16px控制列间空白，别碰margin -
column-gap会参与列宽计算，而margin不会，混用必然错位 - 如果要控制卡片内边距，用
padding，不是margin - iOS Safari 默认
column-gap是1em，不显式声明容易挤爆布局
真要严格按高度找最短列、支持动态加载、保持 DOM 与视觉顺序一致，column-count 就不是解——它不感知子项高度变化，也不响应 resize 重排，横屏时列数不会自动更新。这些地方一旦忽略，上线后就是高频报障点。
