Grid子元素被拉伸变形主因是默认align-items: stretch与justify-items: stretch强制填满轨道，且1fr等价于minmax(min-content, 1fr)，会尊重子项min-width: auto导致撑开；应改用minmax(0, 1fr)、fit-content(300px)等轨道定义，并确保img为直接子项、配width: 100%; height: 100%; object-fit及父项明确高度。
Grid 子元素被拉伸变形，不是你写错了 CSS，而是浏览器在严格执行规范：默认 align-items: stretch 和 justify-items: stretch 会强制子项填满轨道，而图片、按钮、文本块等有固有尺寸的元素，恰恰最怕这种“好意”。解决的关键不在子元素上狂加 width: 100%，而在轨道定义和对齐行为上做减法。
为什么 1fr 轨道会让图片/按钮糊成一片？
根本原因是 1fr 等价于 minmax(min-content, 1fr)，它保证轨道至少能容纳内容的最小固有宽度（比如一个长 URL 或按钮文字），但不阻止它把子项硬拉宽。尤其当子项是 <img> 或 <button> 时，它们的 min-width: auto 会被尊重，导致轨道撑开、比例失真。
- 别改
img { width: 100% }—— 这是在火上浇油，反而让拉伸更彻底 - 优先改轨道：用
minmax(0, 1fr)替代1fr，从源头释放压缩能力 - 对图文混排，
fit-content(300px)比固定像素更安全，既设上限又不卡死 - 若必须保留
1fr，至少补上minmax(min-content, 1fr)，明确告诉浏览器“别小于内容”
object-fit 不生效？先确认 <img> 有没有稳定外框
object-fit 不是开关，它只在图片已有明确宽高边界时才起作用。Grid 里直接塞 <img>，若父容器没约束高度、或 align-items: stretch 又没配 height，图片实际渲染高度可能是 0 或不可预测值，此时 object-fit: cover 就只是个摆设。
-
<img>必须是 Grid 直接子元素（不能套一层<div>） - 给
<img>加width: 100%; height: 100%，再加object-fit: cover（或contain） - 确保其父 Grid Item 有明确高度上下文：比如
grid-template-rows: 1fr或min-height: 200px - 避免在 Grid Item 上同时设
align-items: stretch和height: fit-content，后者会覆盖前者
子元素是 Flex 容器时，为什么内部内容还被压成细线？
多层嵌套时，拉伸/收缩行为会逐层传导。Grid Item 默认 min-width: auto，如果它里面是个 display: flex 容器，这个 Flex 容器也会继承该限制，进而影响其子项（比如一张图）——哪怕你给图写了 flex: 0 0 auto，父级 Flex 容器自身没拿到空间，图照样被压扁。
立即学习“前端免费学习笔记（深入）”；
- Grid Item（即 Flex 容器的直接父元素）必须加
min-height: 0（Chrome 尤其关键） - Flex 容器自身也要加
min-height: 0，解除对齐拉伸的干扰 - Flex 容器的子元素（如
<img>）仍需单独加min-width: 0，防止长文本或替换元素撑开 - 若 Flex 容器内要截断文本，
min-width: 0必须出现在 Flex 容器上，不能只写在孙子节点
响应式下小屏依然被撑开？检查 min-width: 0 是否写对了层级
minmax(280px, 1fr) 在小屏失效，往往不是写错了，而是浏览器按 min-content 计算时，被子项默认的 min-width: auto 卡住。一个无空格的长单词或 base64 字符串，就能让 min-content 大得离谱。
-
min-width: 0必须写在 Grid 直接子元素上，即.grid > .item，不能只写.item - 若子项是空
<div>、Flex 容器或图片父容器，min-width: 0缺一不可 - 长文本需额外加
overflow-wrap: break-word，否则换行机制失效，min-content仍极大 -
text-overflow: ellipsis要生效，必须四条件齐备：min-width: 0、white-space: nowrap、overflow: hidden、max-width: 100%
真正难的不是写哪一行代码，而是判断「拉伸」来自哪一层：是 Grid 轨道太贪心？是 align-items 在默默发力？还是嵌套的 Flex 容器根本没拿到空间？打开 DevTools 的 Computed 面板，盯住 min-width、grid-template-rows 和 align-items 这三项，比猜更快定位问题根因。
