grid子项高度被自动拉伸是因align-items: stretch默认生效——子项未设块轴尺寸时会填满行轨道；关闭需显式设align-items: flex-start（column主轴则用justify-items），单个子项取消拉伸用align-self: flex-start。
为什么grid子项高度被自动拉伸
这不是样式写错了，是align-items: stretch在起作用——Grid容器默认就开启这个行为，只要子项没显式声明块轴尺寸（比如height、max-height），它就会强制拉伸填满所在行轨道的高度。
常见误判：看到卡片高度不一致就怀疑Grid失效，其实更可能是某张卡片悄悄写了height: 200px或align-self: start，导致它退出拉伸队列，其他卡片却被正常拉伸，反而凸显出“不等高”。
如何全局关闭拉伸行为
最直接的办法是让Grid容器放弃默认的align-items: stretch：
- 给容器加
align-items: flex-start（注意不是start，Flex语法兼容性更好） - 若主轴是
column，交叉轴变成水平方向，此时该设justify-items: flex-start - 别依赖继承：显式写出来，避免被CSS重置规则覆盖
- 这个设置不影响
grid-template-rows定义，行高仍由内容决定，只是子项不再被“拽高”
如何只对某个子项取消拉伸
当其他卡片需要等高、仅一个按钮或图标要保持原始尺寸时，用align-self更精准：
- 给目标元素加
align-self: flex-start（Safari旧版对auto支持差，不推荐） - 确保它没同时设
height或max-height，否则align-self会被忽略 - 如果是
<img>，额外加height: auto或object-fit: cover，否则父容器高度限制可能触发隐式拉伸 - React/Vue中动态渲染时，检查
grid-area或align-self值是否被当作变量名而非字符串字面量（比如漏了引号）
容易被忽略的干扰项
即使关掉了align-items，视觉上仍可能“像被拉伸”：
-
min-height设得过大，但内容少，留白被误认为拉伸 - 子项内部用了
display: flex; flex-direction: column却没给中间区块设flex: 1，导致按钮沉底、顶部空荡 - 图片没加
height: 100%和object-fit，实际渲染高度溢出容器，撑高整行 - 父容器有
overflow: hidden，而子项底部带margin，被截断后看起来“矮了一截”
真正要确认是否拉伸生效，打开开发者工具看子项的「Computed」面板：height值是具体像素还是auto；如果是auto且视觉高度远超内容，那大概率是内部布局或替换元素惹的祸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
