CSS Grid 是实现响应式瀑布流最可靠方案，核心为 display: grid + repeat(auto-fit, minmax(300px, 1fr))) + grid-auto-flow: dense；需用 aspect-ratio 或 padding-top 预留图片空间防塌陷；Firefox 下推荐 gap 替代 grid-gap 并配合 margin 补偿；真 Masonry 布局必须依赖 JS。
用 CSS Grid 实现列数自适应的瀑布流
纯 CSS 实现响应式瀑布流，grid 是目前最可靠的选择——它天然支持等宽列 + 自动高度填充，且无需 JS 计算列高。关键不是“模拟瀑布”，而是让每列内容自然撑开、错落排布。
核心写法是：display: grid + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) + grid-auto-flow: dense。其中 minmax(300px, 1fr) 控制单列最小宽度（如 300px），auto-fit 会让浏览器按容器宽度自动计算列数，grid-auto-flow: dense 允许后续项目回填前面留下的空隙（避免因某张图特别高导致下方大片留白）。
常见错误：漏掉 grid-auto-flow: dense，结果出现明显纵向断层；或把 auto-fill 和 auto-fit 混用——auto-fit 会收缩未填充的列，auto-fill 则保留空列占位，响应式场景下必须用 auto-fit。
图片宽高比不一致时的布局塌陷问题
瀑布流最常崩在图片加载完成前：DOM 渲染时图片无尺寸，grid 按 0 高度分配空间，加载后突然撑开，引发重排、列间错位甚至滚动跳变。
解决方法不是等加载完再渲染，而是提前预留空间：
- 给
aspect-ratio: 4/3（或对应比例），现代浏览器原生支持，无需 JS - 兼容旧浏览器时，在
padding-top: 75%（对应 4:3）+position: relative，再把 - 禁用
img { height: auto }类样式，防止父容器高度被压缩
注意：不要依赖 width 和 height HTML 属性做比例控制，它们在响应式布局中已失效；也不要靠 JS 读取 naturalWidth/naturalHeight 动态设 style，延迟和并发问题多。
Firefox 下 grid-gap 不生效或错位
Firefox 对 grid-gap 在 grid-auto-flow: dense 场景下的渲染有历史 bug，尤其当子项高度差异大时，间隙可能消失或出现在错误位置。
稳妥方案是改用 gap（推荐）并配合 margin 补偿：
- 用
gap: 1rem替代旧式grid-gap - 给每个图片容器加
margin-bottom: 1rem，再用:last-child { margin-bottom: 0 }去掉最后一行底部冗余间隙 - 避免对
grid-item设margin同时又设gap，二者叠加会导致 Firefox 间隙翻倍
这个组合在 Chrome、Safari、Edge 和 Firefox 115+ 均稳定，低于 115 的 Firefox 可加 @supports not (gap: 1rem) { ... } 回退到 padding 方案。
需要真实瀑布流（非等宽列）时只能用 JS
CSS Grid 和 Flexbox 都无法实现传统意义上的“首列优先填满、再填第二列”的瀑布流（即 Masonry 布局），这是设计限制，不是技巧问题。
如果业务强依赖 Masonry 效果（比如 Pinterest 风格），必须引入 JS 库或手写逻辑：
- 用
Masonry官方库（masonry.desandro.com），但注意它不支持display: contents子元素，且需手动触发layout() - 用 CSS
column-count+break-inside: avoid是轻量替代，但仅适合文字流式内容，图片易出现跨列断裂 - 若用
IntersectionObserver做懒加载，务必在图片加载回调里调用masonry.layout()，否则新图插入后不重排
真正容易被忽略的是：Masonry 布局下，scroll-behavior: smooth 和 scrollIntoView 在 Firefox 中可能失效，需要额外 polyfill 或降级处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
