使用CSS Grid的grid-template-columns配合auto-fit和minmax可实现响应式图片墙：.image-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px;} auto-fit会自动填充并拉伸列以适配容器，避免空白；minmax(200px, 1fr)确保每列最小200px、最大等比分配。大屏显5列、平板3列、手机1列，无需媒体查询。与auto-fill不同，auto-fit更紧凑，适合图片墙。建议设置图片width: 100%、height: auto或object-fit: cover，并添加padding优化布局。
在响应式网页设计中，图片墙的排列常需要根据屏幕宽度自动调整列数。使用CSS Grid布局中的 grid-template-columns 配合 auto-fit 和 minmax() 是一种简洁高效的实现方式。
基本语法与原理
通过设置 Grid 容器的列模板，让浏览器自动计算可容纳的列数：
.image-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
auto-fit 的作用是：将容器尽可能多地放入符合条件的列，空余空间会被已有列平分拉伸。配合 minmax(200px, 1fr) 表示每列最小 200px，最大为 1fr（等比分配剩余空间）。
响应式自适应效果
这种写法无需媒体查询即可实现动态列数变化：
立即学习“前端免费学习笔记（深入）”；
- 大屏下显示 5 列（每列 ≥200px）
- 平板下自动变为 3 列
- 手机端最小情况下只显示 1 列
所有调整均由浏览器自动完成，开发者无需为不同设备写多套样式。
与 auto-fill 的区别
若使用 auto-fill，即使空间不足也会预留列位置，可能导致最后一行出现空白项。而 auto-fit 会把空余列合并到现有项目中，更适合图片墙这类需紧凑排列的场景。
实际应用建议
为了更好的视觉体验，可结合以下技巧：
- 设置图片 width: 100% 和 height: auto 保持比例
- 使用 object-fit: cover 统一裁剪风格
- 给容器添加 padding 避免贴边
基本上就这些，不复杂但容易忽略细节。
