css grid 本身不支持真正瀑布流磁贴布局，纯 css 方案中 column-count + break-inside: avoid 是唯一无需 js、兼容性好且视觉最接近瀑布流的原生方法；grid 需配合 js 实现高度可控的磁贴布局。
用 CSS Grid 实现真正可控的磁贴布局
磁贴布局（Masonry / 磁砖式）不是靠“自动堆叠”实现的，原生 CSS 的 display: grid 本身不支持跨行高度自适应的瀑布流；所谓“Grid 磁贴”实际是靠 grid-template-rows 静态划分，或配合 grid-auto-flow: dense + 显式 grid-row 控制——但这要求你知道每块磁贴的高度范围。真实项目中更稳妥的做法是：用 Grid 做容器骨架，靠 JS 补齐动态高度对齐。
- 纯 CSS 实现的“伪磁贴”常见于固定高度 +
grid-auto-flow: dense，但一旦子项高度差异大，就会出现明显空隙或错位 - 若所有磁贴高度为 100px / 200px / 300px 这类离散值，可用
grid-row: span 1 / span 2手动指定，适合 CMS 后台等可控内容场景 - 避免用
float或inline-block模拟——响应式断点下极易坍塌，且无法对齐底部基线
用 column-count + break-inside: avoid 快速实现瀑布流
这是目前唯一无需 JS、浏览器兼容性好（Chrome 50+、Firefox 50+、Safari 10.1+）、且能真正按列“垂落”的原生方案。它不叫“磁贴”，但视觉效果最接近瀑布流，尤其适合图片卡片、博客摘要等高度不一的内容。
- 容器设
column-count: 3和column-gap: 1rem，子项加break-inside: avoid防止被截断 - 注意：子项不能设
display: inline-block或float，否则break-inside失效；推荐用display: block（默认即可） - 高度计算基于容器总高自动分配，不支持指定某列优先填满；当某列内容过少时，会出现底部不齐——这是该方案固有表现，不是 bug
- 移动端需用媒体查询重置
column-count，例如@media (max-width: 768px) { column-count: 1; }
为什么不要用 flex-wrap 模拟磁贴
flex 的主轴排列本质是线性顺序，flex-wrap: wrap 只能按行折行，无法让第 3 个子项“掉进”第 1 列剩余空间——这正是瀑布流和普通流式布局的根本区别。强行用 order 或负 margin 调整，会导致可访问性（tab 键顺序）、打印样式、SEO 结构全部错乱。
- 常见错误：给每个子项设不同
flex-basis并依赖换行，结果在 Safari 下换行逻辑和其他浏览器不一致 - 如果只是想让两列等高（非瀑布），用
display: flex; flex-direction: column;配合height: 100%更可靠 - Flex + JS 计算高度分组再渲染？可行但成本高，不如直接上
Masonry库
轻量 JS 方案：用 Masonry 库而非自己写算法
Google 维护的 masonry-layout（已归档）不再更新，当前推荐用 vanilla-masonry 或 CSS Masonry（仅 Chrome 104+ 支持）。但注意：CSS Masonry 是实验性特性，需开启 flag，生产环境慎用。
- 引入
vanilla-masonry后，只需初始化：new Masonry('.grid', { itemSelector: '.grid-item', columnWidth: '.grid-sizer', percentPosition: true }); - 必须提供
columnWidth（可以是元素或像素值），否则会按第一个子项宽度计算列宽，导致响应式失效 - 动态添加内容后，要调用
layout()方法重排，别忘了在img加载完成后再触发（监听load事件） - 服务端渲染（SSR）页面首次加载时，JS 未执行前会显示原始 HTML 流式排列——建议加一层
opacity: 0+ JS 执行后移除，避免闪动
磁贴布局真正的复杂点不在“怎么铺开”，而在于“铺开后如何保持语义结构、可访问性和响应式稳定性”。CSS column-count 最省心，Grid + JS 最可控，Flex 是典型南辕北辙。选哪个，取决于你愿不愿意为视觉一致性多担一点运行时成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
