纯css瀑布流唯一可靠方案是display: grid+grid-auto-flow: dense；column-count因破坏dom顺序、可访问性和响应性，不应用于生产环境。
纯 CSS 实现的瀑布流在现代浏览器中已足够可靠，但必须选对方案：用 display: grid + grid-auto-flow: dense 是目前唯一兼顾语义正确、可访问性、响应式和无需 JS 的方案；column-count 看似简单，实则破坏 DOM 顺序，不该用于生产环境。
为什么 column-count 不该用于真实项目
它把内容按文本流垂直切分，第 1 个 item 会出现在第一列顶部，第 4 个却跑到第二列顶部——而用户直觉是“第 4 个应紧接第 1 个下方”。这直接导致：
- 屏幕阅读器读取顺序与视觉顺序不一致，违反 WCAG 可访问性原则
- 搜索引擎抓取时按 DOM 顺序解析，首屏关键内容可能被排到后面列的底部
- 图片未加载完成时，
break-inside: avoid失效，item 被截断或错位 - 无法响应容器 resize 或动态插入新 item，必须强制触发重排（如
forceLayout）
display: grid 瀑布流的核心参数组合
关键不是堆砌属性，而是理解每个值的实际作用：
-
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))—— 自适应列数，小屏自动收为 1 列，避免横向溢出 -
grid-auto-rows: 10px—— 这个值本身不决定高度，只是告诉 Grid “行高有基准”，否则自动流无法推算跨行跨度 -
grid-auto-flow: dense—— 允许短 item 填补前面长 item 留下的空隙，这是“瀑布”感的来源 -
gap: 12px—— 替代margin控制间距，避免因 margin 折叠或基线对齐干扰行高计算
注意：grid-row: span N 手动控制每项跨行数虽精确，但需预知高度；实际项目中更常用的是让 item 自撑高，靠 grid-auto-rows + dense 自动调度。
图片加载抖动与占位失效的硬解法
瀑布流最常崩在图片异步加载上：没占位 → 高度为 0 → 加载后突然撑开 → 下方所有格子重排跳变。解决路径很明确：
- 服务端输出
<img style="max-width:90%" style="max-width:90%">—— Chrome/Firefox 会据此推导aspect-ratio，无需额外样式 - 客户端 fallback：用
img { aspect-ratio: 4/3; object-fit: cover; }，Safari 15.4+ 支持，覆盖绝大多数现代场景 - 绝对不要对瀑布流首屏 item 用
loading="lazy"，它会延迟加载时机，放大占位失效风险 - 若必须兼容旧 Safari（如 15.3 前），用伪元素 padding-bottom 占位，但需包裹一层
<div class="img-wrapper"> <h3>JS 补位方案只在三个场景下值得引入</h3> <p>不是“功能更强就该用”，而是当 CSS Grid 的自动行为确实失准时才加 JS：</p> <ul> <li>混排高度差异极大的 item（比如 200px 高的卡片 + 2000px 长文），Grid 自动行分配出现明显空隙</li> <li>需要严格保持 DOM 插入顺序填入（例如服务端渲染 + 客户端 hydration 后必须完全一致）</li> <li>动态加载频繁且对首屏 layout shift 敏感（如电商详情页“更多搭配”模块），此时 <code>masonry-layout的layout()比 resize 触发更可控
但要注意：JS 方案必须给容器设 position: relative，每个 item 必须有明确高度（不能 height: auto 且内容未加载完），且新增 item 后必须显式调用 layout() —— 这些漏掉一个，布局就彻底失控。
