grid-template-rows: 1fr 不能让卡片内所有行同高，因为1fr按单个卡片的可用空间均分，而各卡片总高度由内容决定且不一致；必须将整个卡片列表设为一个grid容器，让所有卡片的对应子元素（如标题、摘要）作为同一网格的项目并显式分配行位置，才能实现跨卡片的行高对齐。
为什么 grid-template-rows: 1fr 不能让卡片内所有行同高
很多人试过给卡片容器设 display: grid 和 grid-template-rows: 1fr，发现标题、摘要、底部信息各行高度还是参差不齐。这是因为 1fr 是按**可用剩余空间均分**，而每张卡片的总高度由内容撑开，彼此不同——Grid 的 fr 单位只在同一个网格容器内生效，不会跨卡片对齐。
真正要实现“多列卡片中，每张卡片的对应区域（如标题行）高度一致”，必须让所有卡片共享同一套行轨道定义，也就是把整个卡片列表当作一个大 Grid 容器，而不是每张卡片各自为政。
实操建议：
- 把卡片列表（如
.card-list）设为display: grid，用grid-template-rows显式定义行高（比如auto 1fr auto），而非在单张卡片上设 - 每张卡片（
.card）设为display: contents或直接去掉外层包裹，让卡片子元素（.card__title、.card__excerpt等）成为网格项——否则它们只是嵌套的子网格，无法参与父级行轨道对齐 - 用
grid-row显式指定每个子元素落在哪一行，确保同类内容（如所有标题）都落在第 1 行
用 grid-auto-rows + grid-row 实现动态同高
如果卡片数量不确定、内容长度差异大，硬写 grid-template-rows: 80px 1fr 40px 容易截断或留白过多。更健壮的做法是让 Grid 自动计算行高，靠 grid-auto-rows 和显式行定位协同工作。
关键点在于：第一行（标题）取所有卡片中最高标题的高度，第二行（摘要）自动填满剩余空间，第三行（底部）取所有卡片中最高底部的高度——这正是 grid-auto-rows: minmax(min-content, max-content) 配合 grid-row 的行为。
实操建议：
- 父容器设
grid-auto-rows: minmax(min-content, max-content)，并用grid-template-columns控制列数（如repeat(3, 1fr)） - 每个标题元素加
grid-row: 1，所有摘要加grid-row: 2，所有底部加grid-row: 3 - 避免给卡片本身设
height或min-height，否则会干扰 Grid 的自动行高计算 - 若需摘要区域最小高度（防内容过少时塌陷），可在摘要元素上加
min-height: 6em，但不要用height: 100%——它在display: contents下无效
兼容性与 fallback：IE 不支持时怎么保底
display: contents 在 IE 中完全不支持，而 grid-row 跨卡片定位又依赖它让子元素“透出”到父网格。一旦降级，卡片会垂直堆叠、失去多列布局，且各行不再对齐。
稳妥的 fallback 方案不是模拟 Grid 行对齐（CSS 无原生能力），而是接受“同列卡片视觉上大致对齐”，用 Flexbox + 高度同步 JS 补足：
- CSS 层：用
@supports not (display: grid)切换为display: flex; flex-wrap: wrap，每张卡片设flex: 0 0 calc(33.333% - 1rem) - JS 层：监听窗口 resize，在同一列卡片组内，取
offsetHeight最大值，赋给该列所有卡片的min-height（注意仅作用于标题/摘要等区块，非整卡） - 不推荐用
align-items: stretch拉伸卡片——它只拉伸 Flex 项目自身，无法让内部不同区块（标题、摘要）分别同高
常见错误：用 align-items: stretch 或 height: 100% 强行拉伸
看到卡片高度不一，第一反应常是给卡片设 height: 100% 或父容器设 align-items: stretch。这两者都无效：
-
height: 100%在无明确高度祖先时计算为auto，等于没写；即使祖先有高度，它拉伸的是整张卡片，不是内部各区块 -
align-items: stretch只影响 Grid/Flex 项目在交叉轴上的尺寸，对卡片内部结构无感——它不会让所有卡片的.card__excerpt都变一样高 - 用
line-height或padding手动调齐？维护成本高，响应式下极易错位，且语义错误（用装饰手段解决布局问题）
真正可控的路径只有一条：把需要同高的区域，提升到同一个网格上下文中去参与轨道分配。其他都是绕远路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
