纯CSS响应式瀑布流最稳方案是column-width：设最小列宽、浏览器自动算列数、需break-inside: avoid防截断、column-gap控列距、margin-bottom控行距；IE10/11不支持故无法响应式；grid-lanes是未来方向但仅实验版支持；masonry仅Firefox实验性支持且限制多；flex-wrap无效。
纯 CSS 实现响应式瀑布流，现在只有两条靠谱路径：column-width（多列布局）和 display: grid-lanes（实验性但已可用）。其他方案如 flex-direction: column + flex-wrap 本质无效，grid-template-rows: masonry 仅 Firefox 支持且需手动开启实验选项，不能上线。
用 column-width 实现最稳的响应式瀑布流
这是当前兼容性最好、行为最可预测的方案。浏览器按最小列宽自动算列数，不依赖媒体查询，也不需要 JS 干预。
-
column-width设的是“最小列宽”，不是固定列宽；比如设250px，768px 宽度下可能出 2 列，1200px 下出 4 列，完全由浏览器计算 - 必须加
break-inside: avoid（或avoid-column），否则长图/长卡片会被硬生生截断到两列里 -
column-gap控制列间距，但子项间的垂直间距得靠margin-bottom单独设——column-gap对行内间隙无效 - IE10/11 只支持
column-count，不支持column-width，若必须兼容 IE，请放弃“响应式列数”这个需求
display: grid-lanes 是未来方向，但要注意现实限制
Safari 技术预览版、Chrome Canary 和最新 Firefox 已支持 grid-lanes，它才是语义上真正的瀑布流：新元素自动填入最短列，效果和 Masonry.js 一致。
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
- 写法极简：
display: grid-lanes+grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))+gap - 它底层是 Grid，所以天然支持
grid-column: span 2这类跨列，也支持奇偶列不同宽度（比如minmax(8rem,1fr) minmax(16rem,2fr)） - 目前还不是正式标准，
grid-lanes在稳定版 Chrome/Safari 中默认关闭；上线前务必检查目标用户实际使用的浏览器版本 - 别和
display: grid混用——grid-lanes是独立 display 值，不是 Grid 的子模式
为什么 grid-template-rows: masonry 不推荐用于生产环境
它看起来最理想：一行声明就启用瀑布流，但现实很骨感。
立即学习“前端免费学习笔记（深入）”；
- 目前仅 Firefox 支持，且必须在
about:config中手动开启layout.css.grid-template-masonry-value.enabled - 所有 Chromium 内核浏览器（包括 Edge、新版 Opera）和 Safari 完全不识别该属性，会直接忽略
- 即便在 Firefox 中启用，也无法配合
grid-column跨列，灵活性远不如grid-lanes - 作为实验性 CSS 属性，它的语法和行为仍可能在后续版本中调整，不适合依赖稳定的业务项目
真正上线时，column-width 是唯一能兼顾兼容性与响应式的方案；如果产品只面向技术尝鲜用户或内部工具，可以拿 grid-lanes 先跑通逻辑。别碰 flex-wrap 做瀑布流——它根本不会按列填充，只是把内容纵向堆死再溢出。
