根本原因是图片作为替换元素默认不收缩，需同时设置网格轨道尺寸和object-fit；推荐显式定义grid-template-rows/columns并配合width:100%、height:100%、object-fit:cover/contain。
为什么图片会撑破 grid 容器
根本原因不是 Grid 本身“失控”，而是图片作为替换元素（replaced element）默认有 min-width: auto，浏览器会优先保障其固有尺寸不被压缩——哪怕父容器只有 200px 宽，一张 1200px 宽的图仍会强行撑开整行轨道。
典型现象包括：grid-template-rows: auto 下行高被拉得极高、overflow: hidden 完全无效、水平滚动条意外出现。这不是 bug，是 CSS 规范对替换元素的默认行为。
min-width: 0 为什么能起作用
min-width: 0 是打破这个默认约束的开关。它告诉浏览器：“允许这个元素收缩到 0，别管它原本多大”。但注意：它必须加在图片的**直接父元素**（即网格项）上，而不是图片本身或 grid 容器。
常见错误写法：
- 只给
img设min-width: 0→ 无效，因为图片收缩需要父容器先让出空间 - 只给 grid 容器设
min-width: 0→ 无效，容器不参与内容尺寸计算 - 没配合
width: 100%或max-width: 100%→ 图片可能仍按原始宽渲染
必须搭配的其他设置
单靠 min-width: 0 不足以稳住图片，尤其在响应式场景下：
- 网格容器需定义轨道尺寸，例如用
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))，避免auto轨道无限扩张 - 网格项（图片父元素）设
min-width: 0+overflow: hidden（可选） - 图片自身设
width: 100%+height: auto（保持比例）或width: 100%+height: 100%+object-fit: cover（强制填充） - 若用
minmax(400px, 1fr)，小屏下务必加媒体查询降级为display: block，否则min-width: 0也救不了
移动端特别要注意的坑
在宽度 minmax(400px, 1fr) 会让每个网格项死守 400px 最小宽，直接导致横向溢出。这时候 min-width: 0 没用——因为轨道本身拒绝变小。
真正有效的做法是：
- 用媒体查询在
@media (max-width: 420px)中关闭 grid 布局：display: block - 或者把
minmax()改成minmax(0, 1fr)，但需确认内容是否允许极端压缩 - 不要指望
object-fit单独解决溢出，它只管“怎么填”，不管“有没有空间填”
最易被忽略的一点：min-width: 0 必须加在网格项上，且该网格项不能是 display: contents 或被 transform 干扰——否则计算上下文丢失，约束失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
