Grid 默认行高不等高是因为未显式定义grid-template-rows时，各行按内容自动撑开（auto），彼此独立；只有显式设置如1fr或minmax(0, 1fr)且容器有确定高度约束时，才触发等高对齐。
Grid 默认行高为什么不是等高的
Grid 容器里子元素高度不一致，但你没写 grid-template-rows，结果发现各行高度“随内容走”——这不是 bug，是 Grid 的默认行为：auto 行高按内容撑开，彼此独立。它只在显式定义轨道（比如 1fr 或 minmax(0, 1fr)）时才触发等高对齐逻辑。
常见错误现象：display: grid 后加了 align-items: stretch，但子项高度还是参差不齐；或者用 grid-auto-rows: 1fr，却发现只有新生成的隐式行才生效，已有显式行不受影响。
-
grid-template-rows: auto（默认）→ 各行各自计算高度，互不影响 -
grid-template-rows: 1fr→ 所有行等分剩余空间，强制等高 -
grid-template-rows: minmax(min-content, 1fr)→ 兼容内容溢出又保等高，比纯1fr更稳妥 - 用
grid-auto-rows只影响隐式网格行（超出grid-template-rows定义的部分），对显式行无效
用 1fr 实现等高必须满足的两个前提
光写 1fr 不一定等高，Grid 需要明确“有空间可分”。如果父容器没设高度、或被内容撑开成 auto 高度，1fr 就会退化为 min-content，看起来和 auto 没区别。
使用场景：卡片列表、仪表盘模块、多列表单区域——这些地方需要视觉对齐，且容器高度可控。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须有确定的高度约束，比如
height: 400px、max-height: 60vh，或嵌套在flex/grid的固定轨道中 - 所有目标行必须由同一组
grid-template-rows定义，不能混用auto和1fr（否则auto行优先占位，1fr行再分剩余额外空间） - 若需响应式，
1fr在小屏下可能让内容被压缩，建议搭配minmax(200px, 1fr)限制最小高度
align-items: stretch 为什么有时不起作用
align-items: stretch 是 Grid 的默认值，但它只在“轨道高度未被内容撑满”时才拉伸子项。一旦某行里有个子项自带 height: 300px，或设置了 align-self: start，拉伸就失效了。
性能影响：过度依赖 stretch 做等高，不如直接控制轨道高度——浏览器不用反复测量子项内容，渲染更稳定。
- 检查子项是否写了
height、min-height或align-self，这些会覆盖stretch -
overflow: hidden或text-overflow: ellipsis在拉伸后可能截断内容，需同步调整内边距或字体大小 - Flex 容器里嵌 Grid 时，父 Flex 的
align-items会干扰 Grid 子项的垂直对齐，优先以 Grid 自身的align-items为准
等高 + 内容自适应的折中方案
纯 1fr 太死板，纯 auto 不等高。真正实用的组合是 minmax(0, 1fr)，它让轨道既能等分空间，又能收缩到内容最小高度（比如空 div 或极短文本）。
兼容性注意：IE 不支持 minmax()，如需兼容，得回退到 JS 计算高度或改用 Flex。
-
minmax(0, 1fr)中的0是关键，它允许轨道压缩到 0，避免因 margin/padding 导致高度溢出 - 配合
grid-row: span 2的跨行项，minmax(0, 1fr)仍能保持其他行等高，而1fr可能导致跨行项被拉伸变形 - 如果内容高度差异极大（比如一个 20px 标题 + 一个 500px 图片），等高布局本身可能违背可访问性原则，此时应考虑语义化结构而非视觉对齐
等高不是目的，而是手段；Grid 轨道高度的控制权始终在容器，不在子项。很多人卡在“为什么加了 1fr 还不等高”，其实只是忘了给容器划一道高度边界。
