auto-fit 与 minmax() 组合可实现无媒体查询的响应式图片网格，自动增减列数并等宽撑满容器；需父容器有宽度、图片设 width:100%、minmax() 不可省略，且注意 gap 影响。
用 grid-template-columns + minmax() + auto-fit 实现真正响应式图片网格
不用媒体查询也能让图片网格随容器宽度自动增减列数，关键在 auto-fit 和 minmax() 的组合。它会尝试塞进尽可能多的「最小宽度不小于某值」的列，空列会被合并，比 auto-fill 更适合图片展示场景。
-
auto-fit：生成列后，若有多余空间，会拉伸已有轨道（即图片列等宽撑满） -
auto-fill：不管有没有内容，都保留所有生成的轨道，空白列仍占位 - 必须搭配
minmax(<code>min-width, 1fr)，否则无法触发自动计算列数 - 图片本身需设
width: 100%且height: auto，避免拉伸变形
grid-auto-fit 常见失效原因：父容器没设宽、图片没约束、漏写 minmax
三类典型问题直接导致网格不响应：
- 父容器是
display: grid但没设width或被浮动/绝对定位影响，实际宽度为 0 —— 检查 computed width 是否合理 - 图片未设
max-width: 100%或width: 100%，导致内容溢出撑破网格项 - 写成
repeat(auto-fit, 1fr)或repeat(auto-fit, 200px)—— 缺少minmax()就不会响应式计算列数 - 使用了
grid-gap但没预留间隙空间，导致最后一列被挤掉 ——minmax()的最小值应包含间隙预期，例如minmax(250px, 1fr)比minmax(280px, 1fr)更稳妥（留出 gap 余量）
完整可运行示例：带图片适配和断点微调
.photo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
<p>.photo-grid img {
width: 100%;
height: auto;
display: block;
}</p><p>/<em> 小屏下强制单列，避免图片过窄 </em>/
@media (max-width: 480px) {
.photo-grid {
grid-template-columns: 1fr;
}
}这个写法在桌面端从 3 列平滑过渡到 1 列（取决于容器宽度），且每张图保持原始宽高比。注意 gap 是外边距，不影响 minmax 计算；如果需要更精细控制，可在 minmax() 第一个参数里减去一半 gap 值，但多数情况没必要。
和 flex-wrap 对比：什么情况下不该用 Grid？
Grid 网格对齐精准，但不支持「首行左对齐、末行不拉伸」这种常见画廊需求 —— auto-fit 总会让末行也等宽撑满。此时更适合用 flex + justify-content: flex-start + flex-wrap: wrap，再配合 JS 或 :nth-child 控制换行。
立即学习“前端免费学习笔记（深入）”；
- Grid 优势：列高一致、跨行控制强、语义清晰
- Flex 优势：末行对齐自由、兼容性略好（IE11 需前缀）、动画更易控制
- 混合方案：用 Grid 布局结构，内部用 Flex 排单行图片，兼顾两者优点
真正难的不是写对 auto-fit，而是判断它是否匹配你的对齐诉求。很多“响应式失败”其实源于一开始选错了布局模型。
