grid-template-columns: repeat(auto-fit, minmax(...))) 怎么写才真能自适应
直接说结论：只靠 repeat(auto-fit, minmax(300px, 1fr))) 不一定管用，关键在 minmax() 的第一个参数（最小值）和容器是否设置了 width 或 max-width。
常见错误是把图片容器设为 display: grid 后，父元素没给宽度限制（比如默认 width: auto），导致网格强行撑满整个视口，列数永远只有一列——尤其在移动端。
- 必须确保图片容器的父级有明确的宽度约束，比如
max-width: 1200px或width: 100%+padding控制内边距 -
minmax(300px, 1fr)中的300px是单列最小宽度，不是“图片最小宽度”；如果图片本身小于 300px，会拉伸变形，得配合img { width: 100%; height: auto; } - 用
auto-fit（不是auto-fill）才能收缩空列，否则小屏下会留出大量空白列
图片宽高比不一致时，网格错位怎么办
Grid 只按行/列分配空间，不管内容高度。一张竖图和一张横图并排，会导致整行高度被拉高，下一行对不齐——这不是 Grid 的 bug，是预期行为。
解决思路不是硬调 height，而是用 CSS 容器裁剪 + 占位：
立即学习“前端免费学习笔记（深入）”；
- 给每张图的外层加一个固定宽高比的容器，比如
aspect-ratio: 4/3（现代浏览器支持）或用伪元素 +padding-top技巧 - 图片本身设为
object-fit: cover，避免拉伸或留白 - 禁用
img { display: block }外的其他行内默认行为，防止基线对齐干扰高度
示例结构：
<div class="gallery-item">
<div class="aspect-box">
@@##@@
</div>
</div>对应 CSS：.aspect-box {
aspect-ratio: 4/3;
overflow: hidden;
}
.aspect-box img {
width: 100%;
height: 100%;
object-fit: cover;
}
IE11 或旧版 Safari 下 grid-template-columns 失效怎么兜底
IE11 完全不支持 repeat(auto-fit) 和 minmax()，Safari ≤ 10.1 对 auto-fit 支持也不稳定。这时候不能靠 JS 检测再重写样式，太重。
更实际的做法是用 @supports 做渐进增强，同时保留 Flexbox 回退：
- 先写 Flexbox 布局（
display: flex; flex-wrap: wrap;+flex-basis: calc(33.333% - 1rem)） - 再用
@supports (display: grid)覆盖成 Grid，里面再加一层@supports (grid-template-columns: repeat(auto-fit, ...))确保只对真正支持的环境生效 - 注意：Flexbox 回退里别用
flex-grow: 1，否则小屏下会把图片挤成一条线；优先用flex-basis控制基础宽度
图片加载慢导致网格重排闪动怎么压住
Grid 列数由容器宽度实时计算，但图片加载完成前高度为 0，加载后突然撑开，触发重排——用户看到的是“先密后疏”或“跳动”。这不是 Grid 的问题，是资源加载时机问题。
- 给
img设置明确的width和height属性（HTML 属性，不是 CSS），浏览器能提前预留空间 - 配合
img { height: auto; }保证等比缩放，不会破坏宽高比 - 更稳妥的是用
loading="lazy"+decoding="async"减少主线程阻塞，但别对首屏图用lazy - 如果用
background-image替代img标签，记得设置容器aspect-ratio或伪元素占位，否则还是闪
CSS 响应式图片网格真正的难点不在 Grid 语法，而在如何让「内容尺寸」、「容器约束」、「加载时机」三者对齐。漏掉任意一环，自适应就变成“看起来差不多”。
