纯 CSS Grid 实现高低错落画廊的核心是 grid-auto-flow: row dense 配合不等高 grid-row-end: span X 与 minmax(300px, 1fr) 列宽，辅以 clamp(8px, 2.5vw, 24px) 间隙和图片宽高兜底防塌陷。
用 CSS Grid 实现高低错落画廊的核心思路
直接说结论：不用 JavaScript，纯 grid + grid-auto-flow: dense + 不等高 grid-template-rows 项就能搞定。关键不是“怎么让图片错落”，而是“怎么让后续元素自动填满前面留下的空隙”。
常见错误是只设 grid-template-columns 却忽略 grid-auto-flow 的行为，默认 row 模式会严格按顺序占位，空隙永远留在那儿；而 dense 才触发重排填充。
-
grid-auto-flow: row dense是必须项，缺了就卡死在“一列到底”的错觉里 - 每张图用
grid-row-end: span X控制高度（X = 1, 2, 3…），别用height或aspect-ratio硬撑 - 列宽建议用
minmax(300px, 1fr)，避免小屏下单列过窄、大屏下间隙失控
为什么 grid-column 和 grid-row 要手动写，不能靠 JS 算
手动指定每个 grid-row 范围（比如 grid-row: 1 / 3）看似麻烦，实则稳定——CSS Grid 的自动布局在不等高场景下无法可靠推导“下一个空位在哪”，JS 补位反而容易和容器 resize、图片加载时机打架。
典型翻车点：用 IntersectionObserver 动态加 class 触发 grid 重排，结果图片还没加载完成，offsetHeight 读成 0，高度算错；或者容器宽度变化时 JS 没及时 reflow，画廊撕裂。
立即学习“前端免费学习笔记（深入）”；
- 静态标注比动态计算更可控，尤其内容不常变的画廊（如作品集）
- 如果真要动态，优先用
container查询 +@container媒体查询，而非 JS 测尺寸 - 所有图片务必带
width和height属性（或aspect-ratio），防 FOUC 导致 grid 重排两次
grid-gap 和 gap 在响应式中怎么设才不踩坑
gap 是现代写法，grid-gap 已废弃但部分老浏览器仍需兼容。真正的问题在于：固定值（如 gap: 16px）在移动端太挤，百分比又不被支持。
解法是用 clamp() 搭配视口单位，让间隙随屏幕缩放但有上下限：
gallery {
gap: clamp(8px, 2.5vw, 24px);
}这个写法比媒体查询更轻量，也比 JS 监听 resize 更可靠。
- 别用
%设gap——CSS 规范明确不支持 - 如果父容器有
padding，记得用gap配合padding整体协调，否则边缘留白不一致 - IE 完全不支持
gap，需降级为margin+:nth-child模拟，但代价是失去 dense 填充能力
图片加载失败时高低错落直接崩掉怎么办
一张图 404 或加载超时，height: auto 下它变成 0 高，后续所有 grid-row 锚点偏移，整个布局塌陷——这不是样式问题，是 DOM 结构失效。
最简防御：给图片容器加最小高度兜底，并用 ::before 占位提示加载状态。
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery-item {
min-height: 150px; /* 关键兜底 */
}
.gallery-item::before {
content: "⚠";
display: flex;
align-items: center;
justify-content: center;
color: #999;
}- 别依赖
onerrorJS 事件去换图——它可能不触发（CSP 限制、跨域等） -
loading="lazy"和fetchpriority="high"要搭配用，首屏图优先加载，避免空白等待太久 - 如果服务端能提供宽高，直接写进 HTML：
<img width="600" height="400">，比 CSS 强制更稳
高低错落的本质是视觉节奏，不是技术炫技。手动标定几行 grid 区域、守住最小高度、用好 clamp() 和 dense，比追求全自动方案更省心。图片尺寸不准、加载异常、容器 resize 频繁——这些才是真正在现场拖慢进度的点。
