必须先锁定网格项尺寸再让图片适配：用minmax(0,1fr)替代1fr，网格项设min-width:0/min-height:0并禁用display:contents等破坏盒模型的行为，图片父容器绝对定位+img绝对定位以脱离布局计算。
图片超出 Grid 单元格、拉伸变形或撑破布局，根本不是 object-fit 没起作用，而是它没作用的对象——单元格本身尺寸就不稳定。必须先锁住网格项的尺寸计算逻辑，再让图片适配。
grid-template-rows/columns 必须显式定义轨道尺寸
只写 repeat(3, 1fr) 不够。1fr 是“剩余空间等分”，但若子元素有固有尺寸（比如一张 1200px 宽的图），浏览器会优先满足它的 min-content，导致整列被拉宽。此时 1fr 已被重新解释为“至少 1200px”，object-fit 完全失效。
- 用
minmax(0, 1fr)替代纯1fr，明确允许轨道压缩到底限 - 对固定比例场景（如图库），直接写
minmax(200px, 1fr)或clamp(150px, 4vw, 1fr)，给轨道设安全下限 - 避免
minmax(400px, 1fr)这类写法在小屏下硬卡最小值，引发横向溢出
图片父容器（网格项）必须设 min-width: 0 和尺寸约束
img 自身设 min-width: 0 无效。浏览器强制保障替换元素的固有宽度，约束必须加在它的**直接父元素**（即网格项）上，且该父元素需处于标准布局上下文。
- 网格项（如
.grid-item）必须设min-width: 0; min-height: 0 - 同时确保它有明确的尺寸来源：来自
grid-template-columns/rows，而非靠内容撑开 - 禁用
display: contents或transform等会破坏盒模型计算的行为 - 配合
width: 100%; height: 100%（或aspect-ratio）让尺寸可传递
图片自身要脱离尺寸干扰链
即使上面都做了，大图仍可能在渲染初期短暂撑开布局（尤其 SSR 或动态加载时）。最稳方案是让它不参与布局计算：
- 网格项设
position: relative -
img设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 用
object-fit: contain（保全貌）或cover（填满，注意裁剪） - 绝对定位后，
img不再触发min-content计算，网格轨道彻底稳定
真正容易被忽略的是：所有这些措施必须协同生效。单靠 object-fit 或单设 max-width: 100% 都只是在错误的尺寸基础上做表面缩放，一旦窗口 resize 或内容加载完成，错位立刻重现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
