align-items: stretch 是 grid 容器默认行为，使子项在交叉轴拉伸填满所在轨道高度，但需轨道高度可计算（如 1fr、200px），auto 或 min-content 下无法拉伸；align-self: stretch 同样依赖父容器有明确高度约束且子项无 height/max-height 阻碍。
align-items: stretch 是默认行为，不是“自动撑高”
Grid 子项看起来“填满单元格”，根本不是因为浏览器偷偷给它加了 height，而是容器默认启用了 align-items: stretch。这个值让每个子项在交叉轴（通常是垂直方向）上拉伸，填满它被分配到的网格轨道（grid track）高度——前提是轨道高度可计算。
常见误解是以为“拉伸”等于“和最高项一样高”，其实不是：每个子项只填满自己那一行的可用高度，互不影响。如果 grid-template-rows 写的是 auto 或 min-content，那每行高度由内容决定，子项拉伸后仍可能参差不齐——这不是 stretch 失效，而是“可拉伸的空间”本身就不一致。
- 打开开发者工具 → Computed 面板，直接查容器的
align-items最终值，别只看 Styles 面板（很多 reset 库或框架会全局覆盖为flex-start） -
align-items: stretch是默认值，但显式写上最稳妥，尤其在引入第三方 CSS 后 - 子项若写了
align-self: start，会直接退出 stretch 行为，优先级高于容器设置
为什么写了 align-self: stretch 还没撑满？
根本原因不是 align-self 失效，而是它只在**有明确高度约束的网格容器中才触发拉伸行为**。如果网格行本身高度由内容决定（比如 grid-template-rows: auto），那子项再怎么设 align-self: stretch，也没东西可“拉”。
检查这三点：
- 父容器是否设置了具体高度（如
height: 100vh、min-height: 400px）？Computed Height 不能是auto -
grid-template-rows是否用了可计算值？1fr、200px、minmax(200px, 1fr)可以；auto、min-content不行 - 子项自身是否加了
height、max-height或min-height: 0？这些会直接阻止 stretch 生效
背景色没撑满，可能是 box-sizing 或 outline 干扰
即使尺寸拉满了，背景色也可能“看起来没到边”。这是因为：
-
box-sizing默认是content-box，如果有padding，background-color只画在 padding 边缘以内 -
margin、border会让视觉上留白，误以为没撑满 - 父容器设置了
overflow: hidden，而子项有负margin或transform偏移，导致背景被裁剪
调试时建议先用 outline 替代 background-color：
.grid-item {
outline: 2px solid red;
align-self: stretch;
}
等 outline 对齐了，再换回 background-color——很多时候问题不在逻辑，而在你根本没看清它实际占了多大地方。
grid-template-areas 里 width: 100% 无效，别白费劲
在 grid-template-areas 场景下，width: 100% 对网格项完全没用。因为 grid-area 定义的是区域映射关系，不是尺寸控制逻辑。子项宽高由 grid-template-columns 和 grid-template-rows 决定，它没有传统意义上的“包含块”。
想让项目横向撑满？别动子项的 width，改父容器的列定义：
-
grid-template-columns: 1fr（推荐，响应式友好） -
grid-template-columns: 100%（仅当父容器宽度确定时有效） -
justify-items: stretch（默认已启用，无需额外写）
真正容易被忽略的是：子项内部如果有 flex 容器或绝对定位元素，它们的 height 可能没继承上来，导致背景色被“挤”在一小块区域里——这时候问题不在 grid，而在嵌套结构的尺寸传递链断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
