CSS Grid实现瀑布流的本质限制是仅Chrome 116+支持grid-template-rows: masonry，其余浏览器需用column-count或JS库降级；其生效需满足显式grid-template-columns、无跨行跨列、明确高度及无干扰布局属性等全部条件。
Grid实现瀑布流的本质限制
CSS Grid 本身不支持传统意义上的“瀑布流”（即各列高度不一致、内容按列优先自动填满），grid-template-rows: masonry 是唯一正统解法，但目前仅 Chrome 116+ 原生支持，Firefox 和 Safari 完全不认。强行用 grid-auto-flow: column + 固定行高模拟，会卡死内容高度、破坏语义、导致截断或重叠。
用 grid-template-rows: masonry 的实际条件
这个值不是万能开关，它只在满足以下全部条件时才生效：
-
display: grid容器必须显式设置grid-template-columns（不能是auto-fit或auto-fill） - 子项不能设
row-span或col-span - 容器需有明确的块方向尺寸（如
height或max-height），否则退化为普通 flow - 子项内部不能有
contain: layout或触发新 BFC 的属性（如float、position: absolute）
示例有效写法：
gallery {<br> display: grid;<br> grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));<br> grid-template-rows: masonry;<br> height: 70vh;<br>}
兼容性 fallback 必须手动降级
在不支持 masonry 的浏览器里，Grid 会静默回退到 grid-auto-flow: row，结果变成“横向铺满、纵向堆叠”的单列布局，完全不是画廊效果。不能依赖 JS 检测后切换 class，因为 @supports (grid-template-rows: masonry) 在 Safari/Firefox 中始终为 false —— 它们根本不解析该语法。
立即学习“前端免费学习笔记（深入）”；
- 推荐方案：用
@supports not (grid-template-rows: masonry)匹配旧环境，改用column-count+break-inside: avoid -
column-count缺点明显：无法控制单列宽度下限、不响应容器 resize、图片易被切开 - 若需精确控制，只能上 JS 库（如
mason-js或muuri），但那就脱离纯 CSS 范畴了
响应断点与列数的联动陷阱
很多人用 minmax(300px, 1fr) 配合 repeat(auto-fill, ...) 实现响应列数，但这和 masonry 冲突 —— auto-fill 不被允许。必须写死列数或用媒体查询切换 grid-template-columns。
- 移动端建议固定 1 列：
@media (max-width: 480px) { grid-template-columns: 1fr; } - 平板用 2 列：
grid-template-columns: repeat(2, 1fr)，避免minmax()干扰 - 列数变化时，
height建议也同步调整（比如从70vh改成90vh），否则小屏下容易留白过多
真正麻烦的是：masonry 行为在列数切换瞬间可能闪动、重排错乱，目前没完美解法，只能靠 transition: height 0.3s 稍微缓解视觉跳跃。
