使用Grid布局中的auto-fill与minmax()可实现响应式多列图片排版，通过repeat(auto-fill, minmax(250px, 1fr))自动调整列数，结合gap设置间距，img设置宽高自适应，适用于图片 gallery、商品展示等场景，配合max-width与padding优化布局美观，无需媒体查询即可适配不同屏幕。
在CSS中实现多列图片排版，使用 Grid 布局中的 auto-fill 和 minmax() 是一种高效且响应式的方法。它能自动调整列数以适应容器宽度，无需媒体查询即可适配不同屏幕。
Grid auto-fill 与 minmax() 的作用
auto-fill 允许网格容器在可用空间内自动创建尽可能多的列。结合 minmax(min, max) 可定义每列的最小和最大宽度，确保图片列在不同设备上都能合理显示。
例如：设置每列最小 250px，最大 1fr，浏览器会自动计算能放下多少列，超出则换行。
基本语法与结构
使用以下CSS代码创建响应式图片网格：
立即学习“前端免费学习笔记（深入）”；
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
}
.grid-container img {
width: 100%;
height: auto;
display: block;
}
- repeat(auto-fill, ...)：自动填充列
- minmax(250px, 1fr)：每列至少 250px，剩余空间平均分配
- gap：设置图片之间的间距
- img 样式：保证图片自适应容器，不溢出
实际应用场景建议
这种布局适合图片画廊、商品展示、作品集等需要等宽或多列响应式排列的场景。
- 可将 minmax 的最小值设为 200px 或 300px，根据设计需求调整
- 容器添加 padding 保证边距美观
- 父容器使用 max-width 限制整体宽度，居中显示更佳
基本上就这些。掌握 auto-fill 与 minmax 的组合，能让你用几行 CSS 实现强大的响应式多列布局，简洁又实用。
