column-count只是视觉近似瀑布流，因其将容器当作文本流切片分配，不感知子元素高度、不找最短列；需配合max-height、break-inside: avoid等条件才勉强可用，本质非masonry布局。
column-count 为什么看起来像瀑布流但实际不是
它只是把内容当作文本流切片，按顺序往各列里“倒”，不感知每张图的实际高度。浏览器不会计算“哪列最短”，而是从上到下扫一遍，遇到 break-inside: avoid 就整块塞进当前列，否则可能把一张图硬劈成两半——上半截在第一列，下半截掉到第三列底部。
常见错误现象：column-count: 3 写了但页面还是单列；图片被截断；最后一列明显空着；滚动时某张图突然“跳”到别列。
- 根本原因是容器没设
height或max-height，浏览器认为空间无限，自动退化为 1 列 -
break-inside: avoid必须加在每个直接子元素（如.item）上，裸<img>不支持 - 子项若用了
display: flex或position: absolute，就脱离文档流，列分配逻辑直接失效
必须满足的 DOM 和 CSS 结构条件
浏览器只对 .masonry 的**直系子元素**做分栏切片，中间不能套 wrapper 层。一旦结构嵌套，break-inside: avoid 就失效，图片会被跨列截断。
正确结构示例：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<div class="masonry"> <div class="item">@@##@@</div> <div class="item">@@##@@</div> </div>
-
.item必须是.masonry的直接子节点，不能写成<div class="masonry"><div class="wrapper"><div class="item">...</div></div></div> -
.item要设position: relative，方便内部 badge、价格等绝对定位元素不干扰列高计算 - 图片必须用
width: 100%+height: auto，禁用固定px宽高，否则窄列里溢出或拉伸
兼容性补丁和容易踩的坑
break-inside: avoid 在 Safari 旧版、Firefox、部分安卓 WebView 中支持不全，不加前缀等于白写。另外，column-gap 和 margin 混用会严重干扰列高判断，导致一列堆满、另一列留白。
- 必须加三重前缀：
break-inside: avoid、-webkit-column-break-inside: avoid、-moz-break-inside: avoid - 统一用
column-gap: 1rem控制列间距，不要给.item加margin-bottom - 图片未加载完成时高度为 0，会导致后续元素错位——用
aspect-ratio预留空间，或服务端传宽高生成内联 style - 动态插入新图片后，需触发重排：例如
container.style.columnCount = container.style.columnCount
什么时候该果断放弃 column-count
当你需要响应式列数自动适配、滚动位置不丢失、支持懒加载、或要求可访问性（DOM 顺序与视觉顺序一致）时，column-count 就不再是选项。它本质是文本排版机制，不是布局引擎。
Chrome 116+ 和 Safari 18.0+ 已原生支持 grid-template-rows: masonry，这才是语义正确、行为可控的真瀑布流。而 column-count 在窗口 resize 时会整页重排，用户正在看的图片可能瞬间跳到顶部，交互体验断裂。
真正难处理的，从来不是怎么写 CSS，而是怎么让异步加载、不同比例、不同尺寸的图片，在各种缩放、横竖屏、懒加载触发时机下，依然保持列高大致均衡且不闪动——这需要预占位、精确的重排触发时机、以及对渲染管线的耐心调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
