1fr 失效是因为图片 min-content 尺寸优先于轨道计算，需对网格项设 min-width: 0 并用 minmax(0, 1fr) 确保弹性下限，同时图片配 width: 100% 和 height: auto。
图片把 1fr 轨道撑开，不是 Grid 写错了，而是浏览器在布局阶段优先保障图片的 min-content 尺寸 —— 即使你写了 width: 100%，它也晚于轨道计算，根本拦不住轨道被顶宽。
为什么 1fr 会失效：fr 不设下限，只分“剩余空间”
1fr 的真实含义是“把当前可用空间（扣除固定尺寸、gap 后）按比例分配”，但它默认不设最小宽度。一旦网格项里有图片这类替换元素，它的 min-width: auto 就会生效，等效于 min-width: min-content，也就是图片原始宽度。浏览器先按这个值算轨道，再渲染缩放，结果就是轨道早已被撑大，width: 100% 只是在一个过宽的盒子里压缩图片，容器照样溢出。
-
grid-template-columns: 1fr 1fr在窄屏下可能分配到各 200px，但一张 1200px 宽的图会让第一列实际变成 1200px - 加
overflow: hidden到容器上没用，因为溢出发生在布局计算阶段，不是渲染裁剪阶段 -
object-fit也救不了——它只控制图片怎么填进已有轨道，不参与轨道尺寸决策
必须给网格项设 min-width: 0，且只对直接父元素有效
图片本身设 min-width: 0 无效；网格容器设也无效；唯一起作用的是图片的**直接父元素**（即那个网格项），必须显式打破它的 min-width: auto 默认行为。
- 错误写法：
img { min-width: 0 }→ 图片收缩的前提是父容器先让出空间 - 错误写法：
.grid-container { min-width: 0 }→ 容器不参与子项尺寸计算 - 正确写法：
.grid-item { min-width: 0; width: 100%; }，其中.grid-item是<img>的直接父级 - 若网格项用了
display: contents或被transform干扰，min-width: 0会失效——它依赖标准布局上下文
配合 minmax(0, 1fr) 才能根治轨道失控
光靠网格项上的 min-width: 0 还不够。如果轨道本身没弹性下限，内容仍可能通过隐式轨道撑开容器。要把 1fr 替换为 minmax(0, 1fr)，明确告诉浏览器：“这列可以缩到 0，别硬撑”。
- 写法示例：
grid-template-columns: repeat(3, minmax(0, 1fr)) - 若需保底（如卡片最小 300px），改用
minmax(300px, 1fr)，但小屏下要防横向溢出 - 响应式推荐：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)))，auto-fit会自动收掉空列 - IE 不支持
minmax()，如需兼容，得降级为固定列数或 JS 补丁
图片自身要配 width: 100% + height: auto，别碰 object-fit
object-fit 对 <img> 有效，但只在轨道尺寸已确定的前提下起作用。多数场景下，你要的是等比缩放、不拉伸、不溢出，那就用最朴素的组合。
-
img { width: 100%; height: auto; }→ 等比缩放到父容器宽度，高度自动计算 - 避免
height: 100%（除非父容器有明确高度），否则容易失真或裁剪 - 避免给网格项设
height或min-height，它会干扰行高计算，尤其当搭配grid-template-rows: 3fr 2fr时 - 如需限制最大高度，加
max-height: 400px到img上，再配height: auto，依然保持比例
最容易被忽略的一环是：所有这些约束都依赖「网格项处于标准布局上下文」。只要它被 display: contents、transform、或缺失 box-sizing: border-box（导致 padding/border 加入尺寸计算）干扰，min-width: 0 就形同虚设 —— 这时候你得回退检查父级样式链，而不是继续调图片属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
