Grid子项默认拉高是因为align-items: stretch使子项在交叉轴上拉伸填满所在网格轨道高度，前提是行高可计算且子项未被height、max-height、min-height:0等样式阻止。
为什么 Grid 子项默认会拉高？——align-items: stretch 的真实作用
Grid 子项“看起来等高”，不是因为它们被强制设了高度，而是容器默认启用了 align-items: stretch。这个值让每个子项在交叉轴（通常是垂直方向）上自动拉伸，填满它所分配到的网格轨道（grid track）高度 —— 前提是它没被其他样式拦住。
- 拉伸目标不是“和最高项一样高”，而是“填满自己那一格的可用高度”
- 这个行为不依赖父容器有固定
height，只要行高可计算（比如用1fr、200px或minmax(200px, 1fr)），stretch 就能生效 - 如果父容器的
grid-template-rows全是auto，那每行高度由内容决定，子项拉伸后仍可能高度不一 —— 这不是 stretch 失效，而是“可拉伸的空间”本身就不一致
align-items: stretch 被悄悄覆盖的常见情况
你没写 align-items，但它就是不拉伸？大概率是被隐式覆盖了。现代 CSS 框架、重置库（如 normalize.css）甚至某些编辑器模板，都可能全局设置 align-items: flex-start 或 align-items: baseline，而 Grid 容器也会继承这个值。
- 打开浏览器开发者工具，选中容器，在“Computed”面板里直接查
align-items的最终计算值，别只看 Styles 面板 - 显式写上
align-items: stretch是最稳妥的兜底方式，哪怕它本该是默认值 - 检查子项是否设置了
align-self: start等值 ——align-self优先级高于容器的align-items，单个子项会被单独“放行”出拉伸规则
子项自身哪些样式会阻止 stretch 生效？
即使容器正确设置了 align-items: stretch，子项内部的限制也会让它“缩在角落”。这不是 bug，是 CSS 的层叠逻辑在起作用。
-
height、max-height：任何具体数值都会切断拉伸链，包括height: fit-content或height: auto（后者虽看似宽松，但在某些嵌套场景下会干扰 stretch） -
min-height: 0或min-height: auto：这两个值会明确禁用 stretch 行为，应改为min-height: unset或直接删掉 -
overflow: hidden+ 内容溢出：视觉上像“没拉高”，其实是内容被裁剪了；配合min-height: 100%可缓解 - 绝对定位子元素：不影响 stretch 本身，但会让子项内部布局脱离文档流，导致“拉高了但内容不撑开”
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr; /* 关键：定义可拉伸的行高 */
align-items: stretch; /* 显式声明，防覆盖 */
}
.grid-item {
/ ✅ 允许拉伸 /
min-height: 0; / ❌ 错误！会阻止 stretch /
/ ✅ 正确写法：删掉这行，或写成 min-height: unset; /
/ ❌ height: 100%; 也不推荐 —— 它依赖父容器有明确 height，而 stretch 不需要 /
}
Grid 的等高本质是“区域填充”，不是“内容对齐”。真正容易被忽略的，是行高定义方式和子项内部 box-sizing / padding 一致性 —— 这两点不出问题，align-items: stretch 几乎从不失效。
立即学习“前端免费学习笔记（深入）”；
