原生grid-template-rows: masonry是唯一语义正确、无需js的真瀑布流方案，仅chrome/edge 116+支持，必须同时声明display: grid、grid-template-columns和grid-template-rows: masonry三者，缺一即退化为单列；safari/firefox需用@supports not降级至grid-auto-flow: dense模拟，禁用grid-row、overflow: hidden，图片用aspect-ratio防闪跳。
原生 grid-template-rows: masonry 是目前唯一语义正确、无需 JS 的真瀑布流方案，但它只在 Chrome/Edge 116+ 生效；生产环境必须搭配 @supports 降级，否则 Safari/Firefox 会完全失效或回退为单列。
Chrome/Edge 116+ 用 masonry 实现真瀑布流
这三行缺一不可，漏掉任意一个都会让布局退化：
-
display: grid必须显式声明 -
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))—— 没它，masonry不生效 -
grid-template-rows: masonry—— 仅此一行启用列优先自动填充
子项不能设 grid-row、rowspan 或 height 固定值；容器也不能加 overflow: hidden，否则跨多行的卡片会被裁切。图片加载闪跳？用 aspect-ratio 提前占位，比如 img { aspect-ratio: 9/16; object-fit: cover; }。
老浏览器 fallback：用 grid-auto-flow: dense 模拟
当需要兼容 Safari/Firefox 或 IE 时，这个组合最稳：
-
grid-auto-rows: 10px—— 基准行高（值本身不重要，但不能省） -
grid-auto-flow: dense—— 启用紧凑填充，允许短卡片“插空” - 每张卡片根据预估高度设置
grid-row-end: span N（N = 高度 ÷ 10） - 必须配合
gap控制间距，margin在 dense 模式下容易错位
注意：这个方案依赖高度可预测，如果卡片内有异步图片，得靠 JS 注入真实高度后重设 grid-row-end，否则首屏会堆顶。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
为什么别用 column-count
它看起来最简单，但实际埋雷最多：
- DOM 顺序和视觉顺序不一致：第 1 个元素可能出现在第 3 列底部，破坏屏幕阅读器读取逻辑和键盘
tab顺序 -
break-inside: avoid在复杂嵌套（如卡片内含flex或grid）时经常失效 -
column-gap是唯一合法列间距方式，gap在 column 模式下被忽略 - 打印样式下直接变成超长单列，无法控制分页
除非是纯文字列表、且 SEO 和可访问性不敏感，否则不建议在生产环境用它做瀑布流。
移动端特别注意的两个坑
iOS Safari 下瀑布流容器常出现点击失灵或滚动卡顿：
- 给容器加
-webkit-overflow-scrolling: touch（仅旧版 iOS 需要） - 每张卡片必须有明确
min-height（哪怕min-height: 1px），否则 Safari 可能对高度为auto的元素计算异常 - 视频卡片务必加
playsinline和muted，否则 autoplay 大概率静音也不播
真正难的不是写出来，而是让不同浏览器、不同加载时机、不同交互状态下都保持视觉一致——masonry 看似一行代码，背后全是条件判断和兜底逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
