等高需显式定义弹性行轨道；仅设display: grid不生效，因align-items: stretch仅在grid-template-rows为1fr等可伸展值时才使同行列项填满该行高度。
grid-template-rows 设为 auto 时，列表项不会等高；真正起作用的是 align-items: stretch（默认值）配合显式行轨道定义。
为什么只写 display: grid 不一定让子项等高
Grid 容器默认启用 align-items: stretch，但该行为仅在**行高度未被子项内容撑满、且行轨道高度可伸展**时生效。如果 grid-template-rows 是 auto 或 max-content，每行按自身内容高度计算，stretch 就没东西可拉。
- ✅ 正确做法：用
grid-template-rows: 1fr（或repeat(3, 1fr)）明确创建等分的弹性行轨道 - ❌ 错误假设：以为只要容器是
display: grid，子项就会自动等高 - ⚠️ 注意：
align-items: stretch对grid-template-rows: auto无效，因为“可伸展”的前提是轨道本身有可分配空间
align-items: stretch 在 Grid 中的实际作用范围
它控制的是**同一行内所有网格项在行轴（block axis）上的对齐方式**，不是跨行拉伸。也就是说，它让该行中所有未设置固定块方向尺寸（如 height 或 min-height）的项，填满该行的可用高度。
- 若一行有 3 个子项，且
grid-template-rows: 200px，则它们都会拉伸到 200px 高（除非设置了align-self: start等覆盖） - 若使用
grid-template-rows: 1fr，且容器高度由内容或外部约束决定，则该行高度由所有1fr行共同分配，再由stretch分配给各子项 - 如果某子项写了
height: 50px，它将无视stretch，固定为 50px；其余项仍会拉伸填满剩余空间
等高列表项的最小可靠写法
适用于垂直列表（如卡片组、菜单项），要求每项高度一致，且响应式友好：
立即学习“前端免费学习笔记（深入）”；
.list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-template-rows: 1fr; /* 关键：启用行级弹性分配 */
gap: 1rem;
}
<p>.list > <em> {
/</em> 不要设 height，避免干扰 stretch <em>/
/</em> 可选：统一最小高度保障视觉一致性 */
min-height: 120px;
}-
grid-template-rows: 1fr是最简有效解，比grid-auto-rows: 1fr更可控（后者只影响隐式行） - 避免给直接子项加
height或min-height: 100%—— 后者在无显式高度上下文时无效 - 若需多行等高（如 2×2 卡片网格），改用
grid-template-rows: repeat(2, 1fr)并确保子项数量匹配，或配合grid-auto-flow: dense和grid-auto-rows
真正容易被忽略的是：等高依赖于「行轨道是否具有弹性」，而不是「有没有开启 stretch」。很多人调了半天 align-items 却忘了先定义 grid-template-rows。
