grid-template-rows: masonry 是当前最稳的瀑布流方案，Chrome 105+、Firefox 100+、Safari 16.4+ 原生支持，无需 JS、不闪跳、响应式列数自动适配；而 column-count 仅切片分栏，无法实现真瀑布流。
用 display: grid + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) + grid-template-rows: masonry 是当前最稳的方案，Chrome 105+、Firefox 100+、Safari 16.4+ 均已原生支持，无需 JS 计算列高、不闪跳、响应式列数自动适配。
为什么不用 column-count 实现相册瀑布流
column-count 只是“切片分栏”，不是真瀑布流。它按 DOM 顺序把 .item 往各列里硬塞，不管每列实际高度——结果常是第一列堆满、最后一列空着一大截；图片加载中高度为 0，后续加载完成会突然撑开、引发错位甚至滚动跳变；break-inside: avoid 在 Safari/Firefox 旧版兼容差，裸 <img alt="HTML相册怎么实现多行图片自适应瀑布流展示" > 上基本无效，必须套 <div class="item"> 才能生效。
<ul>
<li>
<code>.masonry > .item 必须是扁平直系结构，中间不能嵌 wrapper 层
column-count 无法预留空间，aspect-ratio 在该模式下不起作用resize 并手动改 style.columnCount，否则列数冻结
grid-template-rows: masonry 的硬性前提
这个属性看似简单，但漏掉任一条件就退化成普通网格：它不会自动找最短列，也不会回填空隙，完全依赖浏览器渲染引擎的 Masonry 布局模块。目前仅现代浏览器支持，且必须三者共存才生效。
-
display: grid是基础，不能写成inline-grid或漏掉 -
grid-template-columns必须显式声明，例如repeat(auto-fit, minmax(280px, 1fr))；只写grid-template-rows: masonry不起作用 - 容器不能设
height或max-height，否则 Masonry 失去自由伸展空间，布局崩成单列 - 子项禁止设
grid-row、rowspan或grid-auto-flow: column，否则破坏自动列分配逻辑
图片加载闪跳？aspect-ratio 是唯一可靠占位方案
所有“等图片 load 完再排”或“用 JS 读 naturalHeight 动态设 height”的做法，在并发加载、缓存差异、CDN 延迟下都会失败。真正防闪跳，靠的是让浏览器在解析 HTML 阶段就知道宽高比。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 直接给
<img alt="HTML相册怎么实现多行图片自适应瀑布流展示" >加style="max-width:90%"，现代浏览器原生识别 - 若需兼容 Safari ≤ 15.3，可在外层加
<div style="aspect-ratio: 4/3"><img alt="HTML相册怎么实现多行图片自适应瀑布流展示" ></div>，旧版忽略该属性但不报错 - 别给整个卡片容器（含标题、价格等文字）设
aspect-ratio，文字行数不确定，比例失效反而拉伸变形 - 禁用
img { height: auto }类全局样式，它会压缩父容器高度，导致 Masonry 按错误高度布局
Firefox 下 gap 错位？用 margin-bottom + :last-child 补偿
Firefox 对 grid-gap（尤其是配合 grid-auto-flow: dense 时）存在历史渲染 bug：间隙可能消失、错位到列间而非项间，或与边框重叠。这不是配置问题，是引擎缺陷。
- 统一用
gap: 1rem（非过时的grid-gap），并额外给每个图片容器加margin-bottom: 1rem - 用
.item:last-child { margin-bottom: 0 }清除最后一行底部冗余间隙 - 避免混用
column-gap和margin，尤其不要在column-count降级路径里沿用同一套 margin 规则 - 测试时务必在 Firefox 最新版（2026 年已修复大部分问题）和 Safari 技术预览版中交叉验证
真正难的不是写对那三行 CSS，而是理解 Masonry 布局不处理“异步高度变化”——一旦图片加载后通过 JS 改了 height 或插入新内容，就必须触发重排（比如改个 transform），否则错位不可逆。所以从服务端传宽高、用 aspect-ratio 占位、禁用动态 height 操作，这三点比任何 JS 补丁都关键。
