grid-auto-rows: 1fr 起作用需容器有明确高度约束；它按比例分配可用高度，非强制等高，须配合 min-height 或父容器高度上下文才能实现卡片等高。
grid-auto-rows: 1fr 不起作用？先确认 grid 容器有明确高度约束
align-items: stretch 默认生效，但前提是网格容器本身在交叉轴（通常是垂直方向）有可拉伸的空间。如果父容器高度是 auto 或内容高度未撑开，grid-auto-rows: 1fr 就无法分配剩余空间——它不是“强制等高”，而是“按比例瓜分可用高度”。常见现象是所有卡片看起来高度不一，其实只是各自内容撑开的自然高度。
实操建议：
- 给网格容器设置明确的
height或min-height（例如min-height: 300px），或让其父级提供高度上下文（如display: flex; flex-direction: column下的子元素） - 避免对网格项（grid item）设置
height: auto或max-height: none类似限制，否则会阻止拉伸 - 若用
grid-template-rows: repeat(auto-fill, minmax(200px, 1fr)))，注意这是按轨道大小生成行，不是让所有项等高；要等高，必须用grid-auto-rows: 1fr+ 容器高度约束
align-items: stretch 是默认值，显式写出来通常没必要
除非你之前改过 align-items（比如设成 start 或 center），否则不用特意加 align-items: stretch。它的作用是让每个网格项在交叉轴方向“尽可能拉伸填满所在轨道”，而 grid-auto-rows: 1fr 才是定义轨道高度行为的关键。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 误以为
align-items: stretch自己就能让不同内容的卡片等高——它只是“拉伸行为开关”，没轨道高度，就无处可伸 - 在
grid-template-rows已固定行高（如200px）时还加grid-auto-rows，后者只影响隐式行，不起效 - 用了
overflow: hidden或text-overflow: ellipsis却没给内容区域设height和display: -webkit-box等截断逻辑，导致文字溢出撑高卡片
真正可靠的等高方案：grid-auto-rows + minmax() + 容器高度上下文
最稳定的做法不是靠单个属性，而是组合控制：用 minmax() 给自动行一个弹性下限+上限，并确保容器有高度依据。例如在响应式卡片流中：
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-auto-rows: minmax(240px, 1fr); /* 每行至少 240px，最多 1fr */
gap: 16px;
/* 关键：提供高度上下文 */
min-height: 50vh;
}这样即使某张卡片内容少，也会被拉到至少 240px；内容多的也不会无限膨胀（受 1fr 在容器内分配限制）。比纯 1fr 更可控。
替代思路：用 align-content: stretch 配合 grid-auto-flow: dense？不推荐
align-content 控制的是“多行之间的对齐”，不是单行内项的高度。设成 stretch 只有在网格有多行且容器高度远大于所有行总高时，才会拉大行间距，而不是拉高每行里的卡片。搭配 grid-auto-flow: dense 更无关——它只影响自动放置顺序，和高度无关。
如果你发现卡片高度不一致，优先检查：
- 是否漏了
grid-auto-rows或写成了grid-template-rows - 网格容器有没有被
height: fit-content、display: contents或浮动破坏高度上下文 - 卡片内部是否有
margin-bottom: auto、position: absolute等脱离文档流的元素干扰拉伸
等高不是 CSS Grid 的“副作用”，而是需要明确构造高度分配路径的结果。漏掉容器高度约束，其他都白搭。
