使用CSS Grid的repeat(auto-fill, minmax())可高效创建响应式图片网格，自动根据容器宽度调整列数。示例代码中grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))定义每列最小150px、最大均分可用空间，配合gap设置间距，实现无需媒体查询的自适应布局。auto-fill会创建尽可能多的轨道（含空轨道），而auto-fit则折叠空轨道使有内容的列拉伸填满，适用于项目较少时占满整行。为适配移动端，建议将minmax最小值调至120px，确保小屏下仍显示2~3列，提升视觉效果。该方法兼容性好，适用于现代浏览器，是构建响应式图片网格的推荐方案。
想要快速实现一个响应式图片网格布局，CSS Grid 的 repeat() 配合 auto-fill 和 minmax() 是最高效的方法之一。它能自动根据容器宽度调整每行显示的图片数量，无需媒体查询也能实现自适应。
使用 grid-template-columns 与 auto-fill
核心是利用 grid-template-columns 结合 repeat(auto-fill, ...)，让网格列数根据空间自动填充。只要设定每个网格项的最小宽度，浏览器就会自动计算最多能放多少列。
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}
.grid img {
width: 100%;
height: auto;
display: block;
}
这段代码的含义是：创建尽可能多的列，每列最小宽度为 150px，最大为 1fr（均分剩余空间）。当容器变窄时，列会自动减少，实现响应式效果。
关键点说明
理解以下几个概念能帮助你灵活调整布局：
立即学习“前端免费学习笔记（深入）”；
- auto-fill：自动填充可用空间，即使没有内容也会创建空的网格轨道
- minmax(150px, 1fr)：定义每列最小 150px，最大 1fr，确保不会溢出或压缩过度
- 1fr 单位：表示“一份可用空间”，所有列平均分配剩余宽度
- gap：设置网格项之间的间距，比 margin 更易控制
与 auto-fit 的区别
如果希望网格在项目较少时也能占满容器，可以尝试把 auto-fill 换成 auto-fit。两者的差异在于：
- auto-fill：保留所有可能的空轨道
- auto-fit：将空轨道折叠，让有内容的列拉伸填满空间
比如只有一张图片时，auto-fit 会让它撑满整行，而 auto-fill 可能只占一格，其余为空。
适配移动端建议
为了在手机上获得更好的体验，可以稍微调低 minmax 的最小值：
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
这样在小屏幕上也能至少显示 2~3 列，避免换行过于频繁。
基本上就这些。用 repeat(auto-fill, minmax(...)) 实现响应式网格简单直接，兼容性良好，现代浏览器都支持，适合大多数图片展示场景。不复杂但容易忽略细节，掌握后能大幅提升布局效率。
