grid-template-rows设为1fr不能使卡片等高，因其仅定义网格轨道高度，而卡片实际高度由内容撑开；需配合grid-auto-rows:1fr与子项min-height:0才能实现真正等高。
grid-template-rows 设为 1fr 为什么卡片高度不一致
因为 grid-template-rows 控制的是**网格轨道（track）** 高度，不是单个卡片自身高度。如果你只设了 grid-template-rows: 1fr，但没限制每个 grid-item 的内容高度，浏览器仍按内容撑开——文字多的卡片就高，少的就矮，视觉上还是不等高。
真正让卡片“等高”，得靠两个配合：让所有卡片共享同一行高（用 grid-auto-rows 或显式 grid-template-rows）+ 让卡片内部内容不突破容器（用 overflow 或 min-height）。
-
grid-auto-rows: 1fr对隐式行有效，适合不定数量卡片 -
grid-template-rows: repeat(auto-fill, minmax(200px, 1fr)))是常见响应式写法，但它控制的是**每行最小高度**，不是卡片最终高度 - 卡片本身需加
height: 100%或min-height: 0（防 flex/grid 内部溢出破坏拉伸）
如何让 grid 卡片真正等高又等宽
等宽靠 grid-template-columns，等高靠 grid-auto-rows + 子项高度约束。关键点在于：**父容器必须有明确高度约束（或由视口/父级撑开），子项才能被拉伸填满**。
下面是最简可靠组合：
立即学习“前端免费学习笔记（深入）”；
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)));
grid-auto-rows: 1fr;
gap: 1rem;
}
<p>.card-grid > <em> {
min-height: 0; /</em> 必须！否则内容撑开导致不等高 */
display: flex;
flex-direction: column;
}</p><p>.card-grid > <em> > </em> {
flex: 1; /<em> 让标题、内容、按钮等区域自动分配剩余空间 </em>/
}注意：min-height: 0 是最容易漏掉的一环——没有它，即使 grid-auto-rows: 1fr 生效，子项仍会优先按内容高度渲染，拉伸失效。
使用 aspect-ratio 实现等高等宽（正方形卡片）
如果目标是“等高等宽”即正方形卡片（比如头像墙、图标网格），aspect-ratio 比手动算宽高比更直接：
.card {
aspect-ratio: 1 / 1;
width: 100%;
}此时卡片宽高严格相等，且随网格列宽自适应。但要注意兼容性：aspect-ratio 在 Safari 15.4+、Chrome 88+、Firefox 89+ 支持；旧版需 fallback 到 padding-top 百分比技巧。
- 不要对
.card同时设height和aspect-ratio，后者会优先生效 - 若卡片内有图片，建议设
img { width: 100%; height: 100%; object-fit: cover; }防形变 -
aspect-ratio不影响网格布局计算，它只约束单个元素自身的宽高关系
常见失效场景和 debug 方法
卡片看起来没拉伸？大概率是以下某个条件没满足：
- 父容器没高度——检查
.card-grid是否被内容高度撑开，或是否需要加height: 100vh/min-height: 300px - 子项用了
align-self: start或其他覆盖默认拉伸行为的对齐属性 - 卡片内部用了
display: block且含浮动/绝对定位元素，破坏了 flex/grid 的流式拉伸 - 用了
grid-template-areas却没给每个区域指定行高，导致隐式行未参与拉伸
快速验证：在开发者工具里选中卡片，看 computed 面板中 height 值是否等于所在网格轨道高度；如果不是，说明 min-height: 0 缺失或父级高度未传递下来。
