错落排版不等于瀑布流：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：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 父容器必须是 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 才是那个被低估的、安静工作的正确答案。