直接用CSS Grid做瀑布流会失败，因grid-template-rows或column-count无法控制子项顺序、不支持跨列吸附、图片高度不一导致底部参差，且break-inside: avoid在Safari中兼容性差，易出现卡片截断或最后一列留空。
为什么直接用 CSS Grid 做瀑布流会失败
小红书首页的瀑布流不是靠 grid-template-rows 或 column-count 硬撑出来的——CSS 原生 columns 属性确实能分栏，但无法控制子项顺序、不支持跨列吸附、图片高度不一导致底部参差，且 break-inside: avoid 在 Safari 里兼容性差，常见“卡片被截断”或“最后一列空一大块”。真正可用的方案只有 JavaScript 驱动的 Masonry 布局，或退而求其次用 display: flex + 多容器模拟。
用 Masonry API（Chrome 116+）最简实现
Chrome 和 Edge 最新版已原生支持 CSS @container 和 container-type: inline-size，但瀑布流核心还是靠新出的 CSS Masonry Layout。它只需两步：
- 给父容器设
display: grid+grid-template-rows: masonry - 子项不设
row-span，高度由内容自然撑开
示例代码：
.masonry {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-template-rows: masonry;
gap: 12px;
}
<p>.masonry > <em> {
break-inside: avoid; /</em> 防止卡片在分页/打印时被截断 */
}⚠️ 注意：grid-template-rows: masonry 目前仅 Chrome 116+ / Edge 116+ 支持，Firefox 和 Safari 完全不识别，会退化为普通网格（所有子项堆在第一行）。上线前必须加 JS 回退逻辑。
立即学习“前端免费学习笔记（深入）”；
兼容所有浏览器的 flex + 多列数组 手写方案
主流做法是把数据按列数分组，每列用一个 div 包裹，再用 display: flex; flex-direction: column 垂直堆叠。关键在分组逻辑——不能简单取模，得按每列总高度动态分配，否则高图扎堆会导致列长严重不均。
- 初始化 3 个空数组代表三列，记录当前各列累计高度
- 遍历每张卡片，选当前高度最小的列 push 进去，并更新该列高度
- 渲染时对每个数组单独生成
<div class="col">，内部用flex-column
伪代码逻辑：
const cols = [[], [], []];
const heights = [0, 0, 0];
<p>cards.forEach(card => {
const minHeightIdx = heights.indexOf(Math.min(...heights));
cols[minHeightIdx].push(card);
heights[minHeightIdx] += card.height || 200; // 预估高度用于分配
});这个策略比纯 CSS 更可控，也方便后续加懒加载和骨架屏——每列可独立监听 IntersectionObserver。
图片加载抖动和占位问题怎么稳住布局
瀑布流最刺眼的问题不是错位，而是图片加载瞬间撑开高度，导致下方卡片跳闪。解决方式不是靠 object-fit，而是从结构层隔离：
- 卡片容器固定宽高比：用
aspect-ratio: 3/4（支持到 Chrome 88+/Safari 15.4+），不支持则用padding-top: 133%+position: relative+ 绝对定位图片 - 图片本身设
width: 100%; height: 100%; object-fit: cover，并加loading="lazy" - 强制设置
img { display: block }，避免默认 inline 基线留白
别信“用透明占位图就行”——如果后端返回的是不同尺寸缩略图（比如 300x400 和 600x300 混用），光靠 CSS 无法统一比例，必须服务端约定输出尺寸，或前端用 srcset + sizes 配合响应式裁剪。
真正在意体验的话，Masonry API 是未来方向，但今天上线就得接受 JS 分列；而图片占位这事，再小的项目也不该交给 CSS 自己猜。
