align-items: stretch是Grid默认行为，但常因align-self: start、height/max-height设置或父容器约束而失效；需确保子项无高度限制且未被单独对齐覆盖。
align-items: stretch 是默认行为，但经常被意外关掉
Grid 容器默认就是 align-items: stretch，子项会自动拉伸填满所在行的高度——这本身就是等高布局的根源。问题往往不出在“没开”，而是在“被关了”。
常见错误现象：.item 高度参差不齐，但你检查过 CSS 并没写 align-items: start；其实可能是某个子项单独写了 align-self: start，或者加了 height、max-height。
- 子项设了
height: 200px或max-height: 300px→ 拉伸被强制覆盖 - 子项写了
align-self: start→ 单独退出 stretch 行为 - 子项内部用了
display: table-cell或绝对定位 → 脱离文档流，不再参与高度计算 - 父容器用了
overflow: hidden+ 子项有margin-bottom→ 视觉上被截断，误判为“不等高”
grid-template-rows: auto 和 1fr 的区别直接影响等高效果
写不写 grid-template-rows，结果天差地别。默认 auto 是按内容撑开，各行独立；而 1fr 是让所有显式行平分可用空间——但前提是父容器有确定高度约束。
常见错误现象：加了 grid-template-rows: 1fr，但子项还是“各自为政”；其实是父容器 height 为 auto，1fr 退化成 min-content。
立即学习“前端免费学习笔记（深入）”；
- 要单行内多列等高 → 不写
grid-template-rows（或显式写auto），靠align-items: stretch就够 - 要所有行统一等高（比如仪表盘固定高度网格）→ 写
grid-template-rows: 1fr，且父容器必须有height、max-height或嵌套在固定轨道中 - 想兼顾内容不被压缩又保持等高 → 用
minmax(0, 1fr)替代纯1fr，尤其在 Safari 旧版本中更可靠
grid-auto-rows 只管隐式行，对已定义的行完全无效
grid-auto-rows 是给“超出 grid-template-rows 定义范围”的那些行用的。如果你已经写了 grid-template-rows: 200px 1fr，那新增的第三行才会受 grid-auto-rows 控制，前两行完全不受影响。
常见错误现象：写了 grid-auto-rows: 1fr，但页面上只有两行，高度还是不一致；因为你根本没定义 grid-template-rows，浏览器按 auto 渲染了显式行，grid-auto-rows 压根没机会生效。
- 目标是“每行都等高”，且行数不确定 → 推荐
grid-template-rows: 1fr+grid-auto-rows: 1fr组合使用 - 只希望新增行等高，已有行按内容走 → 确保
grid-template-rows显式设为auto或留空，再配grid-auto-rows: 1fr - 响应式场景下，
grid-auto-rows: minmax(200px, 1fr)比纯1fr更安全，防小屏内容被压扁
Flex 嵌套 Grid 时，align-items 优先级容易混乱
如果 Grid 容器本身是 Flex 子项，父 Flex 的 align-items 会干扰 Grid 内部的垂直对齐逻辑——尤其是当父 Flex 设了 align-items: center 或 flex-start，可能让 Grid 子项整体偏移，掩盖了 stretch 效果。
常见错误现象：Grid 内明明写了 align-items: stretch，但整个网格块在 Flex 容器里居中了，导致底部留白、看起来“没拉满”。
- Grid 子项的对齐以 Grid 自身的
align-items为准，但父 Flex 的对齐会影响 Grid 容器的定位位置 - 若需 Grid 容器在 Flex 中占满交叉轴 → 父 Flex 加
align-items: stretch（注意不是center） - 更稳妥的做法：Grid 容器外层不用 Flex 做垂直对齐，改用 Grid 或
height: 100%+display: flex的嵌套结构
真正难的不是写对某一行代码，而是判断当前布局中哪一层在控制高度：是 Grid 的轨道？子项自身的 height？还是外层 Flex 的 align-items？漏掉任意一层，等高就失效。最常被忽略的是子项里那个不起眼的 align-self: start 或 min-height: 0 ——它们不会报错，但会悄悄关掉 stretch。
