错位主因是图片加载前高度为0，必须用aspect-ratio提前占位；需同时设置display: grid、grid-template-columns和grid-template-rows: masonry；旧浏览器需降级处理。
直接用 grid-template-rows: masonry 会错位？先看浏览器支持和必要条件
它只在 Chrome 105+、Firefox 100+、Safari 16.4+ 原生生效，旧版本直接忽略该声明，退化为空白或单列。错位最常见的原因是漏写 grid-template-columns —— 没这句，masonry 根本不启动；也别加 grid-auto-flow: column，那是按源顺序填列，不是瀑布流。
- 必须三行同时存在：
display: grid、grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))、grid-template-rows: masonry - 子项禁止设
grid-row或rowspan，否则破坏自动分列逻辑 - 容器不能设
height或max-height，Masonry 需要自由伸展空间
img 加载闪跳导致卡片错位？aspect-ratio 是硬性占位手段
图片加载前高度为 0，Masonry 按 0 布局，图一加载完立刻撑开，页面跳动甚至错列。这不是 JS 能“补救”的问题，而是必须在渲染前就让浏览器知道宽高比。
- 给
<img>直接加style="max-width:90%" - 或用包裹层：
<div style="aspect-ratio: 4/3"><img></div> - 别给整个卡片容器设
aspect-ratio，商品卡含多行文字，比例不固定反而异常 - 旧浏览器（如 Safari ≤ 15.3）忽略
aspect-ratio，但可加min-height: 200px做弱降级
Masonry.js 初始化后还是错位？imagesLoaded 不是可选插件，是必要依赖
Masonry 默认不等图片加载完成，按原始尺寸（比如 0×0）计算位置，结果塌陷、重叠。这不是 bug，是设计如此——你得自己兜底资源加载状态。
- 必须用
imagesLoaded(container).on('always', () => { new Masonry(...) })，而不是先 new 再监听 - 懒加载图片（
data-src）需手动赋值src后，再调用imagesLoaded(newEls)，否则新图永远不进布局 - 避免重复初始化：动态插入新图时，用
layout.appended(newItems)，别每次new Masonry -
imagesLoaded不监听 error，失败图片要自己 catch 并 fallback 占位图，否则留白卡住整列
column-count 看起来简单，为什么图片瀑布流里基本不能用？
它按文本流切分，不感知子元素高度。一张高图会被硬生生截断到不同列，视觉错乱；DOM 顺序与视觉顺序完全错位，影响 SEO 和可访问性；懒加载监听也彻底失效。
- 仅适用于纯文字或等高卡片，别在图片瀑布流里用
- 如果非要用，必须确保每张图有明确高度参考（
aspect-ratio或padding-top占位），且加break-inside: avoid -
column-gap是唯一合法列间距方式，gap在多列模式下无效，margin会被算进列宽，可能少出一列
真正容易被忽略的点是：所有错位问题，90% 源于图片加载前高度为 0。JS 补救永远慢半拍，必须靠 aspect-ratio 或服务端返回真实宽高属性提前占位。没这步，任何方案都只是临时掩盖问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
