应使用 grid-auto-rows: minmax(12rem, auto) 实现多行等高卡片，它为每行隐式轨道设统一最小高度并允许弹性扩展，避免 align-items: stretch 因仅作用于单行而导致各行高度不一。
直接给 grid-auto-rows: minmax(12rem, auto)，别依赖 align-items: stretch 单独撑高——它只管单行内对齐，多行卡片高度依然参差不齐。
为什么 align-items: stretch 看起来没用
它确实是 Grid 默认行为，但只对「当前行内最高卡片」起作用：第一行被拉到 260px，第二行可能只有 180px，第三行又跳到 300px。开发者工具里能看到每行的 grid-row 高度各不相同。
- 常见诱因包括：某张卡片写了
min-height: 200px，其他没写，破坏了拉伸一致性 - 卡片内部用了
display: flex; flex-direction: column却没设height: 100%，导致内容撑开后父容器无法拉伸 - 图片没加
aspect-ratio或object-fit: cover，加载抖动或比例失真会触发重排，等高瞬间错乱 -
position: absolute子元素脱离文档流，让 Grid 失去高度计算依据
必须用 grid-auto-rows: minmax(12rem, auto)
这个声明让每一行隐式轨道遵循同一规则：至少 12rem 高（防塌陷），内容超长时自动撑开。它不依赖容器总高度，也不要求你预设行数，适合动态增减的团队成员列表。
- 别写
grid-auto-rows: 1fr——没有明确容器高度时，1fr会退化为内容最小高度，失去控制力 -
minmax(12rem, auto)比纯1fr更健壮：既兜底，又允许弹性扩展（比如某位成员简介特别长） - 必须配合卡片自身设
height: 100%和display: flex; flex-direction: column，否则内部无法占满轨道
卡片内部结构怎么写才不破功
外部 Grid 控制行高，内部 Flex 控制内容分布。典型结构如下：
.card {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0; /* 关键：解除 flex 子项最小高度限制 */
}
.card-content {
flex: 1; /* 占满剩余空间，不管文字几行 */
}
.card-footer {
margin-top: auto; /* 把头像/职位/社交链接钉在底部 */
}
-
min-height: 0必须加在.card上，不是.card-content；否则flex: 1会因父容器“不可压缩”而失效 - 文字建议加
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;，统一基础行数，避免省略位置差异造成视觉误差 - 如果卡片内容可能为空（比如暂无简介），给
.card-content设个min-height: 2rem，防止高度塌缩
响应式列数变化时等高突然失效？检查 auto-fit 和 minmax
用 repeat(auto-fit, minmax(280px, 1fr)) 做响应式列数，小屏下变成单列，但卡片高度又不一致了——问题往往出在 minmax() 第二参数或容器宽度上下文。
- 确保 Grid 容器有明确宽度（如
width: 100%），否则 Grid 不知道“可用空间”在哪 - 别用
auto-fill，它会保留空轨道，易导致卡片被拉宽变形；auto-fit才会收缩空轨道，适配内容数量 - 删掉
.card上任何height、max-height、min-height（除非是min-height: 0），这些会阻止拉伸 - 图片必须加
aspect-ratio或object-fit: cover，否则加载抖动会破坏等高节奏
最常被忽略的是：Grid 容器本身得有可计算的高度上下文——要么由内容自然撑开，要么设 min-height。如果整个网格区域渲染高度为 0，stretch 和 1fr 都没东西可拉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
