grid-template-rows 不应用于卡片自适应高度，它仅定义显式行轨道；卡片高度应由 grid-auto-rows: auto 控制隐式行，配合响应式列和卡片内部 height: 100% 等设置确保正确伸缩。
直接说结论：grid-template-rows 不该用来控制卡片“自适应高度”，它真正该干的是定义**显式行轨道数量与比例**；卡片高度随内容伸缩，靠的是 grid-auto-rows: auto 或隐式拉伸机制，而不是给 grid-template-rows 写 auto 或 1fr。
为什么 grid-template-rows: auto 没用
很多人写 grid-template-rows: auto 期待卡片高度自动撑开，结果发现卡片塌陷、文字溢出或高度卡死。这是因为：
-
grid-template-rows只作用于你**显式声明的那些行**（比如三张卡片排成一行，它只管这一行），而卡片数量动态时，后续行属于“隐式网格行”，grid-template-rows根本不生效 - 写
auto在这里等价于未定义——浏览器会按内容最小高度算，但若卡片内有position: absolute、float或未设height: 100%的 flex 子项，高度计算就中断 - 更隐蔽的问题：某些 UI 框架（如 Mantine、Chakra）默认给卡片加了
contain: layout，这会隔离渲染上下文，让grid-template-rows: auto彻底失效
grid-auto-rows: auto 才是高度自适应的关键
真正让每张卡片按自身内容决定高度、且整行不被最高卡片绑架的，是 grid-auto-rows: auto。它针对所有**隐式生成的行轨道**（也就是超出你显式定义的行数之后的所有行）生效：
- 每行独立计算高度：第一行高 180px，第二行高 220px，第三行高 160px——各行互不干扰，避免“假等高”带来的大片留白
- 必须搭配
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))这类响应式列定义，否则grid-auto-rows无行可管 - 如果想防塌陷（比如空卡片太矮），改用
grid-auto-rows: minmax(12rem, auto)，既保底又不限高 - 注意兼容性：
grid-auto-rows: auto在 IE 中完全不支持；Safari 10.1+、Chrome 57+、Firefox 52+ 均可用
什么时候才该用 grid-template-rows: 1fr
只有当你明确需要“**单行内所有卡片强制等高**”，且能接受该行高度由内容最多那张卡片决定时，grid-template-rows: 1fr 才有意义：
- 典型场景：商品列表页的首屏固定 3 张卡片，要求视觉整齐，哪怕其中一张只有标题没描述
- 必须配合
align-items: stretch（默认就有），并确保卡片自身没设height、max-height或overflow: hidden - 不能用于多行响应式布局——因为
grid-template-rows: 1fr只定义第一行，第二行开始就回归auto行为，高度立刻不一致 - 如果真要多行等高，得用
grid-auto-rows: 1fr+ 容器设明确高度（如min-height: 300px），否则在无高度约束下，1fr无法分算
卡片内部结构必须配合，否则 grid-auto-rows 白设
就算 grid-auto-rows: auto 写对了，卡片内部一个属性写错，高度照样不自适应：
- 卡片元素必须设
height: 100%（或display: flex; flex-direction: column; height: 100%），否则子内容不占满轨道，看起来像“没撑开” - 图片务必加
width: 100%; height: auto;或aspect-ratio: 4/3; object-fit: cover;，否则原始尺寸破坏行高计算 - 文字截断慎用：
text-overflow: ellipsis必须配white-space: nowrap和overflow: hidden，但这会让高度锁死为单行——如需多行省略，用display: -webkit-box+-webkit-line-clamp - 避免在卡片内用
margin-top: auto推底部按钮——它依赖父容器高度已知，而grid-auto-rows: auto下高度是动态的，容易错位；改用margin-top: auto在 flex-column 卡片内部更稳妥
最易被忽略的一点：当卡片嵌套在 flex 容器里（比如侧边栏 + 主内容区），外层 flex 可能没给 Grid 容器分配高度，导致 grid-auto-rows: auto 失效——此时要给 Grid 容器加 flex: 1 或显式 min-height: 0，破除 flex 最小高度限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
