卡片错位主因是column-count遇未加载图片致高度为0而错误分列，需预留占位或用masonry；原生masonry仅Chrome/Edge 116+支持，降级需@supports检测，Masonry.js失败多因DOM时机、容器定位及图片加载顺序问题。
卡片错位是因为用了 column-count 但没处理图片加载
直接套 column-count 做瀑布流，最常见翻车点就是图片还没加载完、高度为 0，浏览器按“空盒子”切列，结果图一出来就撑开、上下错位、甚至整列偏移。这不是 CSS 写错了，是渲染时机问题。
-
column-count把子元素当纯文本流切分，完全不感知<img>的真实尺寸 - 必须给每张图预留占位：要么写死
width和height属性，要么用aspect-ratio（Chrome/Firefox 支持，Safari 15.4+） - 若用懒加载，
data-src切换src后必须触发重排——column-count不会自动响应 - Firefox 需额外加
page-break-inside: avoid，否则break-inside: avoid可能失效
真瀑布流只靠 CSS？看浏览器版本再决定
grid-template-rows: masonry 是目前唯一语义正确、无需 JS 的原生方案，但它不是“写了就能用”——仅 Chrome 116+ 和 Edge 116+ 支持，Safari 和 Firefox 仍返回 fallback 行为（即退化为普通 grid）。
- 写法很简单：
display: grid; grid-template-rows: masonry; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) - 但必须搭配
grid-auto-flow: row（默认值），不能写dense，否则破坏 Masonry 逻辑 - 别在容器上设
overflow: hidden，Masonry 元素可能溢出裁剪 - 降级方案要提前写好：
@supports not (grid-template-rows: masonry) { ... }里塞column-count或 JS 方案
Grid dense 模拟瀑布流，但得预设行高单位
如果项目要兼容 IE/旧 Safari，又不想引入 JS，可以用 grid-auto-flow: dense + 固定行高模拟，前提是卡片高度有规律（比如统一 200px / 300px / 400px）。
- 设
grid-auto-rows: 10px作为最小单位，再让卡片用grid-row-end: span 30表示 300px 高 - 后端或构建时就得把高度转成 span 值传给前端，纯前端 JS 计算会引发 FOUC
-
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))控制列数，响应式友好 - 绝对禁止
overflow: hidden在 grid 容器上，否则跨多行的卡片会被截断
Masonry.js 初始化失败的三个硬伤
用 masonry-layout 库时，90% 的问题出在 DOM 就绪时机、图片加载顺序和容器定位上下文上，不是库本身有问题。
立即学习“前端免费学习笔记（深入）”；
- 必须等所有卡片插入 DOM 后再初始化，不能在
<head>里执行；推荐document.addEventListener('DOMContentLoaded', ...) - 容器不能有
transform、filter或perspective，否则 Masonry 计算的 offsetTop 出错，卡片飘移 - 图片没宽高占位时，
getBoundingClientRect()返回{ height: 0 }，必须配合imagesLoaded插件或监听load事件后再调layout.layout()
