CSS Grid图片墙的关键是用grid-auto-flow: dense回填空位，配合grid-column/grid-row控制跨格，并通过minmax()和媒体查询实现响应式紧凑布局。
用 CSS Grid 实现图片墙，关键不是堆满格子，而是让不同宽高的图片自然、紧凑地排列，避免大片空白。`grid-auto-flow: dense` 就是解决“空洞”的核心——它允许后续项目回填前面留下的空缺，配合 `grid-template-columns` 和合理设置 `grid-column` / `grid-row`，就能达成视觉上密集、错落的图片墙效果。
基础结构：定义网格容器与自动流动
先给图片容器设为 grid，并启用 dense 模式：
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-auto-rows: 150px; /* 初始行高，后续可被图片撑高 */
grid-auto-flow: row dense; /* 关键：允许回填空位 */
gap: 8px;
}这里 `auto-fill` + `minmax(250px, 1fr)` 让列数自适应容器宽度，每列最小 250px；`dense` 启用紧凑填充。
图片尺寸控制：用 span 控制跨行跨列
每张图片通过内联样式或类名设定跨格范围，模拟不规则布局：
立即学习“前端免费学习笔记（深入）”；
-
竖图（2:3）：设为
grid-column: span 1; grid-row: span 2; -
横图（4:1）：设为
grid-column: span 2; grid-row: span 1; - 正方图：默认占 1×1，无需额外设置
例如：
<img src="a.jpg" style="grid-column: span 1; grid-row: span 2"> <img src="b.jpg" style="grid-column: span 2; grid-row: span 1"> <img src="c.jpg"> <!-- 默认 1×1 -->
响应式增强：用媒体查询动态调整列数与跨度
小屏下减少列数，同时限制大跨度图片出现，避免单图撑满屏幕：
@media (max-width: 768px) {
.gallery {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
/* 禁用横图在小屏的跨列行为 */
.gallery img.wide {
grid-column: span 1 !important;
}
}也可配合 JS 动态加 class，根据图片原始宽高比决定 span 值，提升自动化程度。
注意事项：dense 不会重排顺序，仅优化空位
`grid-auto-flow: dense` 只影响**自动放置**的项目（即没显式指定 `grid-row`/`grid-column` 的元素），不会改变 HTML 顺序，也不会把后出现的图片强行提到前面。所以：
- 若所有图片都手动设置了位置，`dense` 不起作用
- 避免对关键内容（如标题、按钮）依赖 `dense` 回填，应显式定位
- 密集排列可能造成视觉节奏混乱，建议搭配统一的 aspect-ratio 或 object-fit: cover 保持观感一致
不复杂但容易忽略。
