根本原因是align-self: stretch仅在网格行有明确高度（如1fr）时才生效；若grid-template-rows为auto等无约束值，则无法拉伸。需配合grid-template-rows: 1fr与box-sizing: border-box，并用outline调试真实尺寸。
为什么 align-self 设为 stretch 但背景还是没撑满？
根本原因不是 align-self 失效，而是它只在**有明确高度约束的网格容器中才触发拉伸行为**。如果网格行（grid-row）本身高度由内容决定（比如 auto），那即使子项设了 align-self: stretch，它也没东西可“拉”——父行高度就是内容高，自然撑不满。
- 检查网格容器的
grid-template-rows：若写的是auto或min-content，拉伸基本无效 -
align-self: stretch是默认值，显式写出来通常没用，除非你之前覆盖过 - 背景不显眼还可能因为子项内部有
margin、padding或border导致视觉上“没到边”
让网格项真正占满行高的两种可靠方式
别依赖 align-self 单打独斗，得配合容器行高定义：
- 把网格行设为
1fr（或具体像素/百分比）：grid-template-rows: 1fr;
此时align-self: stretch才有可拉伸的空间 - 或者直接给网格项加
height: 100%，但前提是父行有确定高度（否则100%计算结果为0） - 更稳妥的做法是两者结合：
grid-template-rows: 1fr+ 子项align-self: stretch，这是最符合 Grid 意图的写法
背景不显示的隐藏陷阱：z-index 和 overflow
有时背景“看不见”，其实已经拉满了，只是被其他元素盖住或裁剪了：
- 检查父网格容器是否设置了
overflow: hidden，且子项有负 margin 或 transform 偏移 - 确认没有其他同级元素用了更高
z-index盖住了背景 - 如果子项里有 flex 容器或绝对定位子元素，它们的
height可能没继承上来，导致背景色被“挤”在一小块区域里
调试建议：用 outline 代替 background 快速验证尺寸
背景色容易受透明度、混合模式干扰，不如用 outline 直观：
.grid-item {
outline: 2px solid red;
align-self: stretch;
}
这样一眼就能看出实际渲染尺寸是否撑满。等 outline 对齐了，再换回 background-color —— 很多时候问题不在对齐逻辑，而在你根本没看清它到底占了多大地方。
最常被忽略的一点：网格项的 box-sizing 默认是 content-box，如果你加了 padding，那 background 会从 padding 边缘开始画，而不是整个单元格边界。需要时显式写 box-sizing: border-box。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
