grid-template-rows 不能直接实现等高列，真正起作用的是 align-items: stretch（默认值）使子项在行内拉伸等高；需避免 height 固定、display: contents、overflow 隐藏等干扰因素。
grid-template-rows 不能直接实现等高列
用 grid-template-rows 设置固定行高（比如 100px 或 2fr）只控制「行」的高度分配，不保证同一行内多列元素内容高度一致。所谓“等高列”，本质是让多个 grid-item 在垂直方向上拉伸到相同高度——这靠的是 Grid 的对齐机制，不是靠手动设行高。
真正起作用的是 align-items 和 align-self
Grid 容器默认的 align-items: stretch 才是让同个网格区域内的项目自动等高的关键。只要项目没设置固定高度、且没被 align-self 覆盖，它们就会在行方向上拉伸填满整个行高。
-
align-items: stretch（默认值）→ 所有子项等高 -
align-items: start→ 子项顶部对齐，高度由内容决定，不等高 - 单个子项加
align-self: stretch可覆盖容器设置 - 若某子项设置了
height或min-height，可能阻止拉伸
需要显式定义行高时，用 minmax() 或 1fr 更安全
如果想让每行有最小高度（比如避免内容过少时列塌缩），不要写死 grid-template-rows: 200px，而应使用弹性单位：
display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(200px, auto); /* 至少 200px，内容多就自适应 */ align-items: stretch;
这样既保留等高行为，又避免内容溢出或空白过大。硬写 200px 会导致内容超长时被裁剪，或文字换行异常。
立即学习“前端免费学习笔记（深入）”；
注意 display: contents 和 overflow 的干扰
以下情况会让等高失效，容易被忽略：
- 子项内部用了
display: contents→ 它脱离文档流，不再参与 stretch 对齐 - 子项设置了
overflow: hidden且内容超长 → 视觉上像“没拉伸”，其实是内容被截断了 - 父容器有
max-height且未配align-items: stretch→ 拉伸被限制 - 子项写了
height: 100%但父级没显式高度 → 百分比高度失效，回退到内容高度
等高列不是“设个行高就完事”，而是 Grid 的 stretch 行为在特定约束下的自然结果；破坏约束，效果就消失。
