grid-auto-rows: minmax(12rem, auto) 是实现多行等高的关键，它为隐式行轨道设最小高度并允许内容撑开，而 align-items: stretch 仅作用于单行内对齐，无法保证跨行一致高度。
直接用 grid-auto-rows: minmax(12rem, auto)，别依赖 align-items: stretch 单独撑高——它只管单行内对齐，多行依然高低不一。
为什么 align-items: stretch 看起来没用
它默认就生效，但只让同一行里最高的卡片决定该行高度，下一行重新计算：第一行 240px，第二行 160px，第三行又跳到 280px。开发者工具里能看到每行的 grid-row 高度各不相同。
- 卡片内部用了
display: flex; flex-direction: column却没设height: 100%，内容撑开后父容器无法拉伸 - 某张卡片加了
min-height: 200px，其他没加，破坏一致性 -
img没设aspect-ratio或object-fit: cover，加载抖动导致高度浮动 - 子元素用了
position: absolute，脱离文档流，拉伸失效
grid-auto-rows: minmax() 才是多行等高的关键
这个声明作用于所有隐式创建的行轨道（即超出显式定义的行），确保每行都遵循统一规则：
-
minmax(12rem, auto)表示每行至少 12rem 高（防塌陷），内容超长时自动撑开 - 别写
grid-auto-rows: 1fr——没有明确容器高度时，1fr会退化为内容最小高度，失去控制力 - 不要用
grid-template-rows: 1fr，它只影响你显式定义的那几行，第二行起就失效 - 容器本身得有可计算的高度上下文，比如由内容自然撑开，或设
min-height；否则整个网格区域渲染高度为 0，stretch和1fr都没东西可拉
卡片内部结构必须配合，否则拉伸白设
Grid 控制行高，Flex 控制内容分布。常见破功点：
-
.card必须设display: flex; flex-direction: column; height: 100%，否则内部无法占满轨道 -
min-height: 0要加在.card上（不是子元素），否则flex: 1会因父容器“不可压缩”而失效 - 底部按钮用
margin-top: auto推到底，别用position: absolute——后者脱离文档流，高度计算中断 - 删掉
.card上所有height、max-height、min-height（如有，改用min-height: 0） - 图片加
object-fit: cover或aspect-ratio，防止比例失真破坏节奏
auto-fit + minmax() 是响应式列数的起点
列数随容器宽度自动增减，不靠媒体查询硬切：
-
minmax(280px, 1fr)表示每列至少 280px 宽（文字可读、图片不挤），剩余空间均分 -
auto-fit会收缩空轨道，小屏下不会留下窄列；auto-fill则保留空位，易导致卡片被拉宽变形 - 别写
repeat(3, 1fr)——一缩放就错乱或触发横向滚动 - 容器必须有明确宽度上下文，比如
width: 100%或继承父级宽度，否则 Grid 不知道“可用空间”在哪
最容易被忽略的是：Grid 容器本身得有可计算的高度上下文。如果它渲染出来的高度是 0，再准的拉伸规则也无从谈起。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
