CSS Grid 的 grid-template-rows: masonry（Chrome/Edge 116+）是唯一原生响应式瀑布流方案，但属实验性且 Safari/Firefox 不支持；兼容性最佳的纯 CSS 方案是 column-count + break-inside: avoid，需注意直系子元素约束、Safari 兜底及末尾空白缺陷；复杂场景（如图片加载、拖拽排序）必须用 Masonry.js 等 JS 方案。
用 CSS Grid 实现真正响应式的瀑布流布局
原生 HTML5 不提供瀑布流布局能力，所谓“HTML5 布局代码”实际依赖 CSS。目前唯一无需 JS、能响应式断行且语义清晰的方案是 display: grid 配合 grid-template-rows: masonry（仅 Chrome 116+ / Edge 116+ 支持）。但要注意：它仍属实验性特性，grid-template-rows: masonry 在 Safari 和 Firefox 中完全不生效。
常见错误是直接套用旧教程里的 column-count 模拟法——它会导致元素内部文本折行错乱、无法控制单个子项对齐、且 break-inside: avoid 在部分场景下失效。
- 必须为容器设置
column-count或column-width，仅设其一即可；设两者时以column-width为优先参考 - 子项需加
break-inside: avoid，否则图片+文字块可能被硬生生截断在两列之间 - 容器高度不能设为
0或min-height: 0，否则列高塌陷，内容重叠 - 若子项含绝对定位元素（如 badge、close 按钮），需额外用
position: relative约束其父容器
用 column-count + break-inside 的兼容写法（支持 IE11+）
这是当前最稳妥的纯 CSS 瀑布流落地方式，适用于内容结构较固定、不要求严格等高对齐的卡片流（如博客列表、商品展示）。关键在于理解 column-count 是“列数建议值”，浏览器会按容器宽度自动调整实际列数，而非强制切分。
.masonry {
column-count: 3;
column-gap: 1rem;
}
.masonry > * {
break-inside: avoid;
margin-bottom: 1rem;
}注意： 立即学习“前端免费学习笔记（深入）”； 当你遇到这些情况，纯 CSS 已经撑不住： 推荐直接用 瀑布流在手机上崩得最突然，往往不是代码问题，而是 viewport 和缩放逻辑没理清。 瀑布流没有银弹方案。CSS 列布局快但僵，JS 方案灵活却要扛加载与生命周期。选哪个，取决于你愿不愿意为「首屏白屏时间」多加 12KB 的 JS 脚本，以及设计师是否接受「最后一列底部留空」这个视觉妥协。break-inside: avoid 在 Flex/Grid 容器内无效，所以子项必须是 .masonry 的**直系子元素**；若中间包了 break-inside 移到该 wrapper 上。
break-inside 支持较弱，可加 -webkit-column-break-inside: avoid 兜底何时必须上 JavaScript 方案（Masonry.js / CSS Container Queries 配合 JS）
图片加载后高度变化导致列重排错位、需要拖拽排序、服务端渲染首屏要求像素级对齐、子项含视频/iframe 等异步尺寸元素。Masonry 库（v4.2+），它已放弃 jQuery 依赖，API 极简：const elem = document.querySelector('.grid');
const msnry = new Masonry(elem, {
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true
});
columnWidth 推荐用隐藏占位元素（.grid-sizer），比传数值更适应响应式缩放msnry.layout()，否则新图插入后位置错乱；可用 imagesLoaded 插件监听useEffect 或 onMounted 延迟到客户端执行移动端适配中最容易被忽略的三个点
meta name="viewport" 必须含 user-scalable=no？错。禁用缩放会导致 iOS 双击放大失效，反而影响可访问性；正确做法是保留缩放，但给卡片设 max-width: 100vw 防溢出column-count 不会自动重算——需监听 resize 事件并手动触发 document.documentElement.style.columnCount = '2'
column-gap 渲染异常，实测在某些安卓机型上 gap 会变成 2px 固定值，绕过方式是改用 padding-right 模拟间隙
