使用CSS Grid结合grid-auto-flow与fr单位可创建自适应图片网格。通过display: grid、grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))和gap设置，实现无需媒体查询的响应式布局。grid-auto-flow控制排列方向为row或column，配合grid-auto-rows定义行高，fr单位按比例分配空间，使图片在不同屏幕尺寸下自动调整并保持整齐排列。img设置width: 100%、height: 100%、object-fit: cover确保填充且不变形，gap和border-radius提升视觉效果。该方法适用于手机、平板和桌面端，结构简洁且无需JavaScript。
在现代网页设计中，响应式弹性图片布局是提升用户体验的关键。通过结合 grid-auto-flow 与 fr单位，你可以轻松创建自适应、无需媒体查询的图片网格。
使用CSS Grid构建弹性图片网格
CSS Grid提供了一种强大的二维布局方式。利用grid-template-columns配合fr单位，可以让列宽按比例自动分配，适配不同屏幕尺寸。
例如：
.image-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
这段代码会创建一个最小200px、最大1fr的自适应列。当容器宽度变化时，项目会自动换行或拉伸，保持整齐排列。
立即学习“前端免费学习笔记（深入）”；
grid-auto-flow控制自动排列方向
当你不确定图片数量或希望它们按特定顺序排列时，grid-auto-flow 就派上用场了。默认值为row，表示从左到右、从上到下填充。
若设置为column，则优先纵向排列，适合多行少列的场景：
.image-grid {
grid-auto-flow: row; /* 或 column */
grid-auto-rows: 150px; /* 自动创建的行高 */
}
搭配auto-fit或auto-fill，可让空轨道自动折叠或保留，灵活控制空白区域。
fr单位实现动态空间分配
fr（fraction）单位代表网格容器中可用空间的一份。比如1fr 2fr表示两列分别占1/3和2/3宽度。
在图片网格中，所有项设为1fr即可等分空间：
- 容器宽度变小，每列自动缩小
- 图片使用width: 100%填满格子
- 保持一致的间隙（gap）提升视觉舒适度
完整示例：响应式图片画廊
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
grid-auto-rows: 160px;
grid-auto-flow: row;
gap: 12px;
padding: 16px;
}
.gallery img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
这个布局能在手机、平板和桌面端自动调整列数，无需额外JavaScript或复杂断点。
基本上就这些。合理运用grid-auto-flow与fr单位，再配合minmax()和auto-fit，就能做出既美观又实用的响应式图片网格。
