grid-template-rows: masonry 是目前最简稳的响应式瀑布流方案，需搭配 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) 且用 aspect-ratio 防跳闪，老浏览器自动降级为单列。
现代浏览器（Chrome 105+、Firefox 100+、Safari 16.4+）下，用两行 CSS 就能实现真正响应式、无跳闪、不依赖 JS 的瀑布流——grid-template-rows: masonry 是目前最简、最稳的方案。
为什么不用 column-count？
它只是“文字流式分栏”，内容按源顺序垂直填满一列再进下一列，视觉上常出现左边高、右边空一大截；且 break-inside: avoid 只防截断，不解决高度错位。更糟的是：图片加载完成前高度为 0，整列塌陷，加载后突然撑开，造成跳闪甚至错列。
-
column-count适合纯文本或等高卡片，不适合商品图+描述这种高度差异大的场景 - 它无法感知子项真实高度变化，Masonry 才是浏览器原生的“按列高自动分配”引擎
- 老浏览器会安全降级为单列，而
column-count在部分旧 Safari 中可能渲染错乱
grid-template-rows: masonry 必须配什么？
单独写 grid-template-rows: masonry 不生效——必须搭配显式的列定义，否则浏览器不知道该分几列。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 推荐写法：
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))，自动适应容器宽度，最小列宽 300px，最大均分 - 不能只写
grid-auto-flow: column，那是按列顺序填，不是 Masonry 布局 - 子项禁止设
grid-row或rowspan，否则破坏自动高度匹配逻辑
图片加载导致跳闪？用 aspect-ratio 锁定位
DOM 渲染时图片还没加载，高度为 0，Masonry 按 0 布局；等图加载完才撑开，整个流就“抖一下”。不用 JS 监听 load，也不用写死 height（会拉伸图）。
- 直接给
img加：aspect-ratio: 4/3; object-fit: cover; - 或包裹一层
<div style="aspect-ratio: 4/3"><img></div>，更稳妥（尤其当 img 外还有标题/按钮时） - 旧 Safari（15.4 及更早）忽略
aspect-ratio，但不会报错；可加min-height: 200px做弱降级
兼容性 fallback 怎么写才不崩？
别试图用 JS 检测 masonry 支持再切换布局——检测本身就有竞态问题。真正的安全降级是纯 CSS 的、无 JS 干预的退化。
- 只写 Masonry 规则，不写任何
@supports包裹：老浏览器直接忽略grid-template-rows: masonry，退化为普通 Grid 单列流，内容仍可读、不重叠、不溢出 - 避免在父容器（如
article）上设aspect-ratio，文字高度不可控，比例会失效 - 如果必须支持 IE 或旧 Android Browser，才需引入 JS 方案（如 Masonry.js），但代价是监听 resize/load、手动计算列高、触发重排
真正麻烦的不是写对那两行 CSS，而是意识到：图片占位必须靠 aspect-ratio 提前声明，而不是等 JS 算完再塞 height；Masonry 不是“开了就自动好”，它对子项的布局约束（比如禁用 grid-row）比想象中更严格。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
