纯CSS可实现响应式瀑布流，但需据浏览器兼容性、图片/视频异步加载及卡片截断风险选择column-count或grid+grid-auto-flow:dense方案，并严格处理占位与播放控制。
纯 CSS 能做响应式瀑布流，但“能做”不等于“能用好”——关键看你要不要支持图片异步加载、要不要兼容 Safari/Firefox、要不要防止卡片被截断。Chrome/Edge 116+ 可用 grid-template-rows: masonry，但其余浏览器必须降级；真正跨平台稳定的方案，是 column-count + 严格 DOM 结构，或 display: grid + grid-auto-flow: dense 模拟。
column-count 方案：轻量但结构敏感
适合后台页、静态商品列表、CMS 预渲染场景，零 JS，IE11 也跑得动。但它对 HTML 结构极其苛刻：
-
.masonry容器下每个.item必须是**直系子元素**，中间不能插<div class="wrapper">，否则 <code>break-inside: avoid失效，图片会被硬生生劈成两半 - 必须写
.masonry > *或.masonry > .item，不能只写.masonry .item，后者会污染内部按钮、文字等嵌套节点 - Safari 不认
break-inside，得补-webkit-column-break-inside: avoid - 容器不能设
height: 0或min-height: 0，否则列高塌陷，卡片叠一起 -
column-width: 280px比column-count: 3更响应式——浏览器按宽度自动算列数，小屏自然变单列 - 容器设
display: grid、grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))、gap: 8px - 每张卡片必须加
grid-column: span 1，否则可能跨列拉伸视频/图片 - 禁用
grid-auto-rows，让高度由内容决定；视频卡片推荐用aspect-ratio: 9/16控制比例 - 图片加载后高度变化会导致下方卡片上跳——必须预留占位：给
.item设min-height: 200px，或用padding-bottom: 177.77%（9/16 的百分比）配合height: 0 - 别在
DOMContentLoaded就初始化 JS 行为（比如 IntersectionObserver），等图片load事件后再触发重排，否则首屏全是挤在第一列 - 务必加
poster属性，哪怕只是灰色占位图；否则懒加载loading="lazy"会失效，首屏卡顿明显 - 自动播放逻辑要收口到
IntersectionObserver，只对视口内卡片调用video.play()，并用.catch()捕获拒绝错误 - iOS Safari 强制要求
playsinline存在且不能移除muted；Android Chrome 对静音视频宽容些，但首次进入仍大概率失败 - 别把所有视频都塞进一个页面——考虑分页或无限滚动时动态
appendChild，减少初始 DOM 节点数
grid + grid-auto-flow: dense 方案：可控但需防塌陷
这是目前最平衡的“伪瀑布流”：不依赖 JS、支持任意高度卡片、列数随屏宽自适应。但它不是真 masonry，得手动管理高度语义：
video 自动播放和 poster 配合问题
短视频瀑布流里，<video autoplay></video> 基本无效——Chrome/Safari 要求 muted + playsinline + 用户有过交互（如滚动）。更糟的是，上百个 <video></video> 同时请求 src，会打满带宽、触发大量 404（视频还没上传完）：
立即学习“前端免费学习笔记（深入）”；
真正难的不是写几行 CSS，而是判断哪部分该用纯 CSS、哪部分必须交由 JS 控制高度与播放时机；最容易被忽略的，是图片/视频加载完成前的占位策略——没它，再好的布局也会在用户滚动时突然“掉帧”。
