错落排版不等于瀑布流：column-count才是纯css实现高度参差相册墙的最稳解法，grid仅适用于明确需跨列/跨行的可控布局；column-count配合break-inside: avoid、width: 100%和响应式media查询即可实现无需js、兼容性好、自然错落的效果。
错落排版不等于瀑布流，先分清你要哪种“错落”
直接用 grid-template-columns 搞“图片高度不一、视觉参差”的相册墙，大概率会失望——Grid 天然对齐，它不负责让每列高度独立滚动或自动填空。真要那种 Pinterest 式错落，column-count 才是纯 CSS 里最稳的解法；如果只是想让某张图横跨两列、某张占两行，那才是 Grid 的主场。
真实错落感：用 column-count 替代 Grid
这是目前唯一无需 JS、兼容性好、且能响应高度差异的纯 CSS 方案：
-
column-count控制列数，column-gap设列间距（不是 margin） - 每张图用
break-inside: avoid防止被断开跨列 - 图片必须写
img { width: 100%; height: auto; display: block; }，否则比例失真 - 响应式只需改
column-count：小屏改1，中屏改2，大屏保持3 - 别在
figure或img上设固定高，否则破坏列内自然流式填充
可控错落：Grid 显式跨度只适合设计明确的场景
当你有确定的布局意图，比如“第3张图必须横跨两列”，才该用 Grid：
- 父容器必须是
display: grid，inline-grid或flex都无效 - 用
grid-column: span 2让某项跨列，比手动写grid-column-start/end更可靠 - 避免靠
grid-template-areas实现动态内容——模板字符串和grid-area值必须完全一致，拼错一个字母就留白 - 卡片内部文字长度不一时，用
display: flex; flex-direction: column; height: 100%+flex-grow: 1占中间，按钮用margin-top: auto贴底，才能保持底部对齐稳定
容易踩的坑：边距、尺寸、渲染层三类硬伤
错落效果崩掉，往往不是 Grid 写错了，而是外围干扰没清理干净：
- 栅格项（如
.card）上直接写margin，会撑破minmax(280px, 1fr)的计算逻辑，间距应挪到内部容器上 -
minmax(280px, 1fr)中的280px是列最小可用宽度，不是卡片最小宽度；卡片本身得加max-width防大屏拉太宽 - hover 时用
transform: scale()比改width安全，后者触发重排，尤其在没设min-height的卡片里会跳动
真正难的不是写几行 Grid 代码，而是判断“这个错落需求到底该不该用 Grid”。多数时候，错落感来自内容高度差异，而不是结构跨度——这时候，column-count 才是那个被低估的、安静工作的正确答案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
