CSS Grid 无法原生实现真正瀑布流布局，因其列高统一且无“最短列优先插入”调度能力；纯CSS仅column-count可模拟视觉效果，但功能受限；真正瀑布流必须依赖JavaScript或实验性grid-template-rows: masonry。
css grid 无法原生实现真正瀑布流布局
Grid 的列高是统一的，所有网格项按行排列，同一行内所有项目共享最大高度。瀑布流要求每列独立伸缩、异步填充，而 grid-template-rows 是显式定义或由内容撑开的全局行为，不支持“某列填满后再往下一列追加”的动态分流逻辑。
为什么 grid-auto-flow: column 看起来像瀑布流但实际不是
它只是把自动放置顺序从逐行改为逐列，但前提是行高已固定（如用 grid-auto-rows: 200px），否则仍会按内容高度自动计算整行高度——此时列之间依然会被同步拉齐，无法形成错落感。
- 若设置
grid-auto-rows: min-content，所有行高退化为单个项目高度，列间无高度累积，失去瀑布流“长列承载更多内容”的核心特征 - 若使用
grid-auto-rows: 1fr，所有行等高，列高完全一致，更偏离瀑布流 - 浏览器不会根据列当前总高度选择“最短列”插入新项——这是 JavaScript 实现的核心逻辑，CSS Grid 没有该调度能力
替代方案中哪些能接近瀑布流效果
纯 CSS 下只有 column-count + break-inside: avoid 能模拟视觉瀑布流，但它基于文本流分栏，不适用于需要精确控制网格项位置或交互的场景（比如拖拽、hover 动画、响应式重排）。
article {
column-count: 3;
column-gap: 1rem;
}
article > div {
break-inside: avoid;
}
- 优点：无需 JS，兼容性好（Chrome 50+ / Firefox 52+）
- 缺点：无法指定某项跨列、不能响应鼠标事件精确定位（因内容被浏览器内部切片）、打印样式混乱、移动端 column-count 响应式切换困难
- Grid 和 Flexbox 都无法替代此方案在纯 CSS 瀑布流中的位置
真正可用的瀑布流必须依赖 JavaScript 或服务端预计算
现代实现如 Masonry（CSS container-query 尚未普及前的主流）、react-virtualized/Masonry、或使用 IntersectionObserver + 列高数组维护，本质都是运行时测量各列底部位置，再将新元素 append 到最短列容器中。
立即学习“前端免费学习笔记（深入）”；
- CSS Grid 的
grid-area可以手动指定位置，但无法动态判断“哪列最短”，必须靠 JS 计算后写入内联样式 - 即使结合
@container查询，目前也无法触发基于列高状态的条件渲染，缺乏响应式调度机制 - 所谓“Grid 瀑布流”教程，基本都是用 JS 控制
grid-row-start+grid-row-end手动布局，Grid 只当容器壳用，逻辑仍在 JS 层
别被“CSS 新特性”标题误导——只要浏览器没实现 grid-flow: masonry（目前仅 Chrome 116+ 在 origin trial 中实验性支持，且仅限 grid-template-rows: masonry 单方向），就不存在开箱即用的 Grid 瀑布流。
