首选 grid-template-rows: masonry（Chrome/Edge 116+），需配 grid-template-columns 且禁用 grid-row/align-self；Safari/Firefox 降级用 column-count + break-inside: avoid；JS 方案须缓存列高、监听图片加载、响应式重置。
现代浏览器中实现真正响应式瀑布流，首选 grid-template-rows: masonry；但 Safari 和 Firefox 当前（2026 年 8 月）仍不支持，不能直接上线用。必须按目标浏览器分级落地。
用 grid-template-rows: masonry 实现原生响应式（Chrome/Edge 116+）
这是目前唯一无需 JS、不触发重排、能随内容高度自动断行的方案。但它不是“开了就灵”，有硬性前提：
-
display: grid容器必须同时声明grid-template-columns（如repeat(auto-fill, minmax(280px, 1fr))），只设grid-template-rows: masonry会完全失效 - 子项不能带
grid-row、rowspan或align-self: start/end，否则破坏自动堆叠逻辑 - 若容器内含图片，无需监听
load事件——Masonry 布局引擎会在图片尺寸就绪后自动重排 - 在 Safari/Firefox 中它会安全降级为单列流（不是错位或白屏），适合做渐进增强
用 column-count + break-inside: avoid 兼容所有浏览器（IE11+）
这是当前最稳妥的纯 CSS 方案，但容易因细节疏忽导致元素被截断或列高塌陷：
- 容器必须是直系子元素布局：
.masonry > *才能生效break-inside: avoid；中间嵌套一层<div class="wrapper">就会让图片被硬切成两半 -
column-count: 3是“建议列数”，实际列数由容器宽度和column-width共同决定；设了column-width就会忽略column-count - 容器不能设
height: 0或min-height: 0，否则列高计算失败，所有内容挤成一坨 - Safari 对
break-inside: avoid支持较弱，建议加兜底：break-before: column配合margin-bottom强制分隔
JavaScript 动态定位必须处理的三个关键点
当需要拖拽排序、图片懒加载、或服务端渲染首屏时，JS 方案不可替代，但别直接抄旧教程里的“找最短列”算法：
立即学习“前端免费学习笔记（深入）”；
- 不能只读
offsetHeight：图片未加载完成时该值为 0，得等img.naturalHeight > 0或用IntersectionObserver触发重算 - 列高数组要缓存并复用：每次插入新元素都遍历全部 DOM 计算高度，滚动加载 100+ 卡片时性能断崖下跌
- 响应式断点需重置列数：窗口从桌面缩到手机，列数从 4 → 1，旧列高数组必须清空重来，否则新元素全塞进第一列
- 绝对定位元素（如角标 badge）要包裹在
position: relative的父容器里，否则脱离列上下文乱飘
短视频卡片场景下千万别用 float 或 flex
视频卡片高度差异大，flex-wrap: wrap 会因基线对齐留出大片空白；float 在现代 CSS 中已弃用，且无法响应式断列。正确做法是：
- 用
display: grid+grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))控制列宽 - 每张卡片设
grid-column: span 1，禁用跨列，避免aspect-ratio: 9/16被拉伸 - 必须加
gap: 8px：没 gap 时卡片紧贴，视频 poster 加载闪烁极其明显 - 自动播放必须配
muted playsinline，且首次调用video.play()得在用户交互（如滚动）后触发，否则 Chrome/Safari 直接拒绝
真正麻烦的不是选哪种方案，而是混合场景：比如首页用 Masonry，但某模块需拖拽排序，就得在同一页面共存两种布局逻辑——这时列高同步、resize 重算、以及 SSR hydration 的时机，才是掉头发的真正起点。
