css grid 无法实现真正的瀑布流，因其不支持根据内容高度自动跨行；实际需结合 js 动态计算每列高度并显式设置 grid-row 起止位置，配合 grid-template-columns 控制列数，禁用 grid-auto-flow 以避免意外重排。
Grid 本身不支持“自动跨行”来模拟瀑布流
CSS Grid 的 grid-template-rows 是显式定义的，grid-auto-rows 只能设固定高度或 minmax()，但无法让一个 grid-item “根据内容高度自动跨多行”并腾出左侧空间供后续项填充——这正是 Pinterest 瀑布流的核心行为。纯 CSS Grid（哪怕配合 grid-row: span X）做不到真正的流式重排，因为跨行数必须提前知道，而卡片高度是动态的。
所以实际方案是：用 Grid 做容器骨架（列布局 + 列内垂直流），靠 JS 动态计算每张卡片该放进哪一列、该设多高的 grid-row 跨度。
用 grid-template-columns 固定列数，禁用 grid-auto-flow
先给容器设好等宽列，例如 4 列：
.masonry-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: dense; /* 关键：允许重排，但还不够 */
gap: 12px;
}
注意：grid-auto-flow: dense 能让空缺被后续项填充，但它不会改变项的顺序或自动跨行——你仍需手动控制 grid-row。因此更稳妥的做法是关掉自动流，完全由 JS 控制位置：
- 把
grid-auto-flow设为row（默认）或直接不写，避免意外重排 - 所有子项初始不设
grid-column/grid-row，JS 注入时才写 - 列宽用
fr或minmax(240px, 1fr)保证响应性
JS 动态分配列和跨度：维护每列当前高度数组
核心逻辑是维护一个 columnHeights = [0, 0, 0, 0]，遍历每个卡片，找出当前最短列，把卡片放进去，并更新该列高度：
const container = document.querySelector('.masonry-grid');
const items = Array.from(container.children);
const columnCount = 4;
const columnHeights = new Array(columnCount).fill(0);
<p>items.forEach(item => {
const minHeight = Math.min(...columnHeights);
const columnIndex = columnHeights.indexOf(minHeight);</p><p>// 计算卡片渲染后真实高度（需已插入 DOM 或强制 layout）
item.style.position = 'absolute';
item.style.visibility = 'hidden';
container.appendChild(item); // 确保可测量
const height = item.offsetHeight;
item.style.cssText = ''; // 清除临时样式</p><p>// 设置 Grid 位置：从第 columnIndex + 1 列开始，跨 1 行（实际跨度由后续计算决定）
item.style.gridColumn = columnIndex + 1;
item.style.gridRowStart = Math.floor(minHeight / 12) + 1; // 基于行高粗略对齐（仅示意）</p><p>// ✅ 正确做法：用 <code>grid-row: auto / span N</code> 不可靠；应改用 <code>grid-row: start / end</code>
// 先记录起始行号（基于当前列高度），再算结束行号（起始 + 跨度）
const rowHeight = 12; // 假设基础行高 12px（实际应取 computed style 或设统一最小行高）
const startRow = Math.floor(minHeight / rowHeight) + 1;
const spanRows = Math.ceil(height / rowHeight);
item.style.gridRow = <code>${startRow} / ${startRow + spanRows}</code>;</p><p>columnHeights[columnIndex] += height;
});</p>
⚠️ 容易踩的坑：
- 没触发 layout 就读
offsetHeight→ 卡片需已挂载且可见（可用getComputedStyle+display: block临时保障） - 用
grid-row: span N会导致 Grid 自动找下一个空行，破坏列对齐 → 必须用start / end显式指定范围 - 未考虑
gap：列高度累加时要加上gap×（已放置项数 − 1），否则行位置偏移 - 响应式变化（如列数变）时没重算 → 需监听
resize并重新分配
替代方案：用 column-count + break-inside 更轻量
如果不需要精确 Grid 对齐（比如不要求卡片左对齐到同一列线），CSS 多列布局更简单：
.masonry-fallback {
column-count: 4;
column-gap: 12px;
}
.masonry-fallback > * {
break-inside: avoid;
margin-bottom: 12px; /* 模拟 gap */
}
优点：零 JS、天然流式、支持内容高度差异；缺点：无法控制某张卡片横跨多列，且列间高度不一致时底部参差明显。适合内容以文字为主、对视觉精度要求不高的场景。
真正需要 Grid + JS 方案的，往往是卡片含图片/视频、需懒加载、要动画入场、或列宽随视口强约束的业务场景——这时别省那几十行 JS，老实用列高数组+显式 grid-row 控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
