使用CSS Grid的repeat(auto-fit, minmax())实现图片墙自适应布局，容器根据宽度自动调整列数，每列最小150px、最大1fr，配合gap和aspect-ratio确保响应式与视觉紧凑，推荐auto-fit使项目扩展占满空间，优于auto-fill留白，适配多屏仅需调整minmax值，简洁高效。
使用 CSS Grid 实现图片墙的自适应排列，关键在于 grid-template-columns 结合 repeat() 与 auto-fit 的灵活布局能力。这种方式能根据容器宽度自动调整每行显示的图片数量，无需媒体查询即可实现响应式效果。
基本语法：repeat(auto-fit, minmax())
核心写法如下：
.grid-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}
解释：
-
auto-fit：让网格容器自动填充可用空间，尽可能多地创建符合最小宽度要求的列。 -
minmax(150px, 1fr)：每列最小宽度为 150px，最大为 1fr（均分剩余空间）。 - 当容器变窄时，列数自动减少，始终保持图片不被压缩过度。
图片项的基本设置
每个图片项无需额外设置宽度，Grid 会自动分配：
立即学习“前端免费学习笔记（深入）”；
.grid-item {
aspect-ratio: 1 / 1; /* 可选：统一图片比例 */
overflow: hidden;
border-radius: 8px;
}
.grid-item img {
width: 100%;
height: 100%;
object-fit: cover; / 图片裁剪以填满容器 /
}
这样所有图片都会保持一致的显示比例，并完整覆盖其容器。
适配不同屏幕的技巧
如果希望在小屏幕上更紧凑，可以调整 minmax 的最小值：
- 移动端可设为
minmax(100px, 1fr)，提升小屏利用率。 - 桌面端可设为
minmax(200px, 1fr)，避免单图过小。 - 也可通过父容器设置
padding或max-width控制整体宽度。
与 auto-fill 的区别
auto-fit 和 auto-fill 看似相似，但行为不同：
-
auto-fill：创建所有可能的轨道，即使没有内容也会留空。 -
auto-fit：将空轨道折叠，让现有项目扩展占满空间，更适合图片墙。
图片墙推荐使用 auto-fit，视觉更紧凑自然。
基本上就这些。用 repeat(auto-fit, minmax()) 搭配 Grid 布局，几行 CSS 就能实现高度自适应的图片墙，维护简单且兼容性良好。不复杂但容易忽略细节。
