原生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 时，这个组合最稳：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
grid-auto-rows: 10px—— 基准行高（值本身不重要，但不能省） -
grid-auto-flow: dense—— 启用紧凑填充，允许短卡片“插空” - 每张卡片根据预估高度设置
grid-row-end: span N（N = 高度 ÷ 10） - 必须配合
gap控制间距，margin在 dense 模式下容易错位
注意：这个方案依赖高度可预测，如果卡片内有异步图片，得靠 JS 注入真实高度后重设 grid-row-end，否则首屏会堆顶。
为什么别用 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 看似一行代码，背后全是条件判断和兜底逻辑。
