卡片高度不一致主因是结构或样式破坏拉伸链：未设grid-template-columns、子项含height/max-height、absolute脱离文档流、容器被overflow截断或缺乏高度上下文。
align-items: stretch 默认就生效，但卡片高度不一致，基本是因为你动了不该动的地方——不是 Grid 或 Flex 不行，是结构或样式悄悄破坏了拉伸链。
为什么写了 display: grid 卡片还是高低不一
Grid 本身对同一行的卡片默认就是等高的，但这个“等高”只在满足条件时才真正可见：
-
.card-grid容器没设grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))—— 写死repeat(3, 1fr)或用auto-fill都会导致列数错乱、高度计算失准 - 某张
.card上写了height、min-height或max-height—— 这会直接打断 Grid 的拉伸行为，哪怕只写了一张，整行都会“塌”下来 - 卡片里用了
position: absolute的标题或按钮，且父级没配position: relative—— 内容脱离文档流，Grid 就当它不存在，高度自然算不准 -
.card-grid外层被overflow: hidden或max-height截断 —— 高度上下文没了，stretch就像拉一根没锚点的绳子
grid-auto-rows: minmax(12rem, auto) 才管多行统一感
单靠 align-items: stretch 只能保证每行内部等高，第一行高、第二行矮？那是没设好行轨道：
- 别碰
grid-template-rows—— 它只影响你手动写的那几行，新增的行（比如换行后）完全不受控 -
grid-auto-rows: minmax(12rem, auto)是关键：它作用于所有隐式创建的行轨道，确保每行至少有 12rem 高，内容多就自动撑开 - 如果设成
grid-auto-rows: 1fr，而容器又没min-height或没被父级约束，1fr会退化成min-content，看起来和没写一样 - 这个值必须配合卡片内部的
height: 100%才能穿透生效，否则只是“画饼”
.card 内部必须用 flex-column + margin-top: auto
文字少的卡片按钮上浮，不是高度问题，是视觉锚点错位。解决方式很固定：
-
.card本体加display: flex; flex-direction: column; height: 100%—— 注意是height: 100%，不是min-height - 底部按钮（比如
.card-footer）加margin-top: auto—— 它会自动吸附到底部，前提是父容器是 flex column - 删掉卡片内所有
height、max-height，图片加object-fit: cover或aspect-ratio—— 否则加载抖动或比例失真会瞬间破坏等高节奏 - 别给
.card加h-100（Bootstrap 类）或fit-content—— 这些都会干扰 Grid 的拉伸逻辑
overflow: hidden 或 max-height 压扁。哪怕只是加一行 min-height: 200px，都比靠 JS 补丁或降级方案来得干净。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
