必须显式设置min-width: 0在img的直接父网格项上，解除其默认min-width: auto对收缩能力的锁定，再配合max-width: 100%、height: auto等规则才能使图片适配网格轨道。
因为 img 的直接父元素（即 Grid 子项）默认有 min-width: auto，它锁死了收缩能力——哪怕你设了 grid-template-columns: 1fr 1fr，图片照样把整列顶开。
Grid 子项的 min-width: auto 是罪魁祸首
这不是 bug，是 CSS 规范行为：min-width: auto 等效于 min-content，浏览器会强制保障子项至少能放下其“内容最小宽度”。对图片来说，就是原始宽度；对长英文单词来说，就是一个不可断行的单词宽度。
常见错误现象包括：
- 设置
max-width: 100%但没效果 -
overflow: hidden只裁剪，不阻止列宽膨胀 - 水平滚动条意外出现，或
grid-template-rows: auto行高暴涨
必须在网格子项上显式写 min-width: 0
这个声明必须加在 img 的**直接父元素**上（通常是 .card、.grid-item 这类 wrapper），而不是加在 img 自身或 Grid 容器上。
立即学习“前端免费学习笔记（深入）”；
生效前提很关键：
- 该父元素不能是
display: contents（会破坏布局上下文） - 不能被
transform、position: absolute等干扰尺寸计算 - 必须配合明确的轨道约束（如
grid-template-columns: 1fr或具体像素值）
只加 min-width: 0 不够，还得配尺寸控制规则
min-width: 0 只是解除“最小内容宽度锁”，之后你才能用其他规则真正约束尺寸：
-
img自身要设width: 100%或max-width: 100%+height: auto - 若需保持比例，父容器加
aspect-ratio: 4/3，img加object-fit: cover或contain - 避免用
minmax(400px, 1fr)这类写法——小屏下轨道拒绝变小，min-width: 0就没机会起作用
特别注意表格、表单控件等固有尺寸元素
像 <table>、<code><input>、<button></button> 这类元素也自带 min-width: auto，同样需要对其直接父网格项设 min-width: 0。其中 <table> 还得额外加 <code>table-layout: fixed 才能真正响应宽度变化。
最容易被忽略的一点：不是“加了什么”，而是“先解除了什么”。min-width: 0 看似简单，却是 Grid 中让图片真正听你话的第一道也是最关键的开关。
