grid子项默认拉伸是因容器启用align-items: stretch和justify-items: stretch，可通过设置align-items: start等关闭；局部控制用align-self/justify-self；图片等固有尺寸元素需配合minmax(min-content, 1fr)和max-width: 100%防拉伸。
为什么 grid 子项会默认拉伸
Grid 容器默认启用 align-items: stretch 和 justify-items: stretch，这不是 bug，而是规范行为：子项会主动填满所在轨道的交叉轴（通常是高度）和主轴（通常是宽度）。你看到“被拉宽/拉高”，大概率不是样式写错了，而是这个默认行为正在生效。
关闭全局拉伸最直接的方式
在 grid 容器上显式设为非 stretch 值即可，常用组合是：
-
align-items: start（关闭垂直拉伸） -
justify-items: start（关闭水平拉伸） - 或更保守地只关一个：
align-items: start+ 保留justify-items: stretch（仅防高度变形）
注意：别只写 align-items: flex-start —— Grid 里用 start，不是 flex-start；后者在部分浏览器中可能 fallback 成 stretch。
需要局部控制时用 align-self / justify-self
如果大部分子项要保持拉伸，只让某几个“不拉”，就别动容器级设置，改用子项自身属性：
- 对单个子项加
align-self: start或align-self: center，它会覆盖容器的align-items - 同理，
justify-self: start控制水平方向 - ⚠️ 检查是否误加了
align-self: stretch—— 这反而强化拉伸，且容易被当成“重置”操作
常见陷阱：React/Vue 渲染时动态绑定 class，结果某个子项悄悄带上了 align-self: start，整行高度就错乱了。
图片、按钮等固有尺寸元素特别容易被拉伸
它们有自然宽高，但 Grid 强行塞进 1fr 轨道后，会糊成一片。关键不是给子项设 width: 100%，而是约束轨道本身：
- 把
grid-template-columns: 1fr 1fr改成grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 1fr) - 对图片父容器加
min-width: 0（解除默认min-width: auto保护） - 图片自身必须配
max-width: 100%+height: auto，否则minmax()也救不了
真正起效的从来不是“子项收缩”，而是“轨道尊重内容最小尺寸”。minmax(min-content, 1fr) 是比 1fr 更安全的默认值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
