Grid 中多行卡片等高需用 grid-auto-rows: minmax(10rem, auto)，而非 align-items: stretch 或 grid-template-rows: 1fr；因前者仅作用于单行，后者在无明确容器高度时退化为内容高度，而 minmax 能统一各行最小高度并允许弹性扩展。
Grid 本身不保证多行卡片等高，只保证单行内拉伸；要真正统一高度，必须用 grid-auto-rows: minmax()，而不是依赖 align-items: stretch 或 grid-template-rows: 1fr。
为什么 align-items: stretch 看起来没用
它确实默认生效，但只对「当前行」的最高卡片起作用：第一行被撑到 240px，第二行可能只有 160px，第三行又跳到 280px。开发者工具里能看到每行的 grid-row 高度各不相同。常见诱因包括：
- 卡片内部用了
display: flex; flex-direction: column却没设height: 100%，导致内容撑开后父容器无法拉伸 - 某张卡片加了
min-height: 200px，而其他没加，破坏了拉伸一致性 - 图片没设
aspect-ratio或object-fit: cover，高度随内容浮动 - 卡片子元素用了
position: absolute，脱离文档流，使拉伸失效
grid-auto-rows: minmax(10rem, auto) 才是关键
这个声明让每一行隐式轨道遵循同一规则：至少 10rem 高，内容超长时自动撑开。它不依赖容器总高度，也不要求你预设行数，适合动态卡片列表。注意：
- 别写
grid-auto-rows: 1fr——没有明确容器高度时，1fr会退化为内容最小高度，失去控制力 -
minmax(10rem, auto)比纯1fr更健壮：既防塌陷，又允许弹性扩展（比如日历中某天有 5 行训练计划） - 必须配合卡片自身设
height: 100%和display: flex; flex-direction: column，否则内部无法占满轨道
卡片内部结构怎么写才不破功
外部 Grid 控制行高，内部 Flex 控制内容分布。典型结构如下：
立即学习“前端免费学习笔记（深入）”；
.card {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0; /* 关键：解除 flex 子项最小高度限制 */
}
<p>.card-content {
flex: 1; /<em> 占满剩余空间 </em>/
}</p><p>.card-footer {
margin-top: auto; /<em> 推到底部，别用 position: absolute </em>/
}容易忽略的点：
-
min-height: 0必须加在.card上，不是.card-content；否则flex: 1会因父容器“不可压缩”而失效 - 文字建议加
display: -webkit-box; -webkit-line-clamp: 2;统一基础行数，避免省略位置差异造成视觉误差 - 如果卡片内容可能为空，给
.card-content设个min-height: 2rem，防止高度塌缩
响应式列数别用媒体查询硬切 repeat(2, 1fr)
直接用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 让浏览器连续计算列数。媒体查询只做三件事：
- 极小屏强制
grid-template-columns: 1fr，防卡片过窄 - 大屏加
max-width和居中，控宽度不控列数 - IE 降级用
@supports not (display: grid)切换到 Flex 布局
硬在媒体查询里写死 repeat(3, 1fr) 会和 auto-fit 冲突，中间尺寸容易卡死列数，还加大维护成本。
