纯 CSS 无法实现真正的 Pinterest 瀑布流，column-count 仅支持多栏流且需严格设置 break-inside、aspect-ratio 和 overflow；grid-auto-flow: dense 是兼容性更好的视觉折中方案；Masonry.js 需确保 itemSelector 准确及图片加载完成后再初始化。
纯 CSS 实现不了“Pinterest 风格”的真瀑布流——它只是多栏流，不是按列高动态填充。想不写 JS 就有靠谱效果，只能接受视觉近似；真要列底对齐、图片加载不塌陷、响应式稳定，必须引入 JS 或用现代 Grid 折中方案。
column-count 能用但必须设对这三件事
这是最轻量的纯 CSS 方案，适合后台页、内容静态、图片宽高已知的场景。翻车基本都出在这几个点：
-
break-inside: avoid必须加在直接子元素（如.item）上，不能只加在img上；Firefox 还得补一句page-break-inside: avoid - 容器别设
overflow: hidden，否则跨列元素（比如带阴影或伪元素的卡片）会被裁掉 - 图片没加载完时高度为 0，会导致后续内容错位——要么提前写死
height，要么用aspect-ratio: 4/3预留空间（Chrome/Safari 支持，IE/Firefox 旧版需 fallback）
grid-auto-flow: dense 是现代 CSS 最稳的折中解
不用 JS、兼容性比 grid-template-rows: masonry 好太多（后者仅 Chrome/Edge 116+ 支持），但效果是“视觉瀑布”，不是严格列高对齐。关键在怎么写：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 用
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))替代固定列数，避免小屏下列宽被压扁 - 必须配
grid-auto-flow: dense，否则空缺不会自动填 - 子项不能设
margin，会干扰列数计算；间距统一用gap - 如果卡片高度差异大，得手动设
grid-row-end: span 2之类来模拟比例，否则短卡片塞不满空隙
Masonry.js 初始化前最容易漏的两件事
引入 masonry-layout 看似省事，但初始化失败常因这两点：
立即学习“前端免费学习笔记（深入）”；
-
itemSelector必须精确匹配直接子项，比如容器是#grid，子项是.item，就得写itemSelector: '.item'，不能写成'.item > div'或'.item *' - 图片没加载完就调
new Masonry()，getBoundingClientRect()返回高度 0 —— 要么等所有img.onload触发，要么用imagesLoaded插件包装：container.imagesLoaded().then(() => new Masonry(...))
真正难的不是选哪种方案，而是判断你的内容是否允许“错一帧”：column-count 加载闪跳、grid-dense 列底不齐、Masonry 重排卡顿——每种妥协都藏在具体交互路径里，而不是代码行数里。
