grid 布局不原生支持瀑布流，但可高效实现不规则卡片排版；真瀑布流需依赖 chrome/edge 116+ 的 masonry，或降级为 column-count、grid dense 等方案。
Grid 布局本身不原生支持“瀑布流”（即按列优先、高度自适应的 Masonry 效果），但它能高效实现**不规则卡片排版**（如首屏大图+侧边小卡组合）；而真正的瀑布流，需结合浏览器支持度与降级策略来分场景处理。
不规则卡片排版：用 grid-template-areas 最稳
适合固定结构的首页、仪表盘、内容摘要页——区域语义清晰、改布局不牵连其他项。
- 在容器上定义 grid-template-areas，用字符串矩阵描述视觉区块，比如：
"header header sidebar"<br>"main main sidebar"<br>"footer footer footer"
- 每个子卡片设置 grid-area 匹配对应区域名，如
grid-area: main - 用 grid-template-columns 和 grid-template-rows 控制轨道尺寸，推荐配合
minmax()或fr实现弹性，例如：grid-template-columns: 2fr 1fr; - 响应式时，只调整
grid-template-columns和grid-template-rows，区域名保持不变；小屏下可设为单列：@media (max-width: 768px) { grid-template-columns: 1fr; }
近似瀑布流：grid + dense + 固定行高
适用于卡片高度有规律或可预设的场景（如统一 200px/300px/400px 高度），兼容性好，纯 CSS 可控。
- 容器设 display: grid，用
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))自适应列数 - 关键组合：
grid-auto-rows: 10px;（作为计算基准）grid-auto-flow: dense;（启用紧凑填充） - 每张卡片根据自身高度动态跨行，例如高 300px → 跨 30 行：
grid-row-end: span 30;（需 JS 预算或后端传比例） - 避免
overflow: hidden，否则跨多行的卡片会被截断
真瀑布流：masonry（仅 Chrome/Edge 116+）
这是目前唯一语义正确、无需 JS 计算的原生方案，但必须做好降级。
- 启用条件：
display: grid;<br>grid-template-columns: repeat(3, 1fr);<br>grid-auto-flow: column;<br>grid-template-rows: masonry;
- 硬性要求：图片必须有明确高度（
height或aspect-ratio），否则渲染为 0 高度堆顶 - 用
@supports (grid-template-rows: masonry)包裹，内部写 masonry 方案；外部写 column-count 或 grid dense 降级 - 不要依赖
justify-content或align-items对齐，列内默认左对齐、顶部对齐
稳妥落地：column-count 仍是轻量首选
适合后台系统、内容静态、图片尺寸一致的场景，零 JS、性能好、兼容到 IE10。
- 容器设
column-count: 3;或响应式column-width: 280px; - 每张卡片加
break-inside: avoid;（Firefox 还需page-break-inside: avoid;） - 卡片必须是块级元素，默认
div即可，不能float或inline-block - 注意：Chrome 下
<img>默认 inline，底部留白，建议统一设display: block;
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
