grid-item 背景不撑满的根源在于父网格行无明确高度，align-self: stretch 需依赖 grid-template-rows 设为 1fr 或具体值才能生效；子项内嵌 flex/grid 容器需设 height: 100% 或 flex: 1，且须确保 box-sizing: border-box、无干扰 margin/absolute、背景透明或正确覆盖。
grid-item 背景不撑满，先看 align-self 是否有作用空间
根本不是 align-self: stretch 失效，而是它根本没东西可拉——如果网格行用的是 auto、min-content 或没设高度，那子项再怎么 stretch，父行本身高度就是内容高，背景自然只盖住那一小块。
检查你的 grid-template-rows：若写的是 auto 或 minmax(min-content, max-content)，align-self: stretch 基本等于摆设。
- 可靠做法是把行设为
1fr（或具体值如200px、100vh），给 stretch 提供明确的拉伸目标 -
align-self: stretch是默认值，显式写出来没意义，除非你之前覆盖过它 - 别忘了加
box-sizing: border-box，否则 padding/border 会额外撑出尺寸，干扰视觉判断
子项内部元素对齐方式会吃掉背景显示区域
即使 grid-item 本身拉满了，里面一个 display: flex 的子容器若没设 height: 100%，它的高度仍由内容决定，背景色就被“挤”在顶部一小条里，看起来像没撑开。
常见翻车点：
- 子项内用了
flex或grid，但没给它设height: 100%或flex: 1 - 子项里有
position: absolute元素，脱离文档流后，父级不再为其保留空间 - 子项设置了
margin（外边距不参与背景绘制），误以为是背景没到底，其实是空白被 margin 占了
用 outline 而不是 background-color 快速验证真实尺寸
背景色容易受透明度、混合模式、父层 overflow: hidden 或 z-index 遮挡干扰，一眼看不出是不是真没撑满。换 outline 更直接：
.grid-item {
outline: 2px solid red;
align-self: stretch;
}
这样能立刻确认渲染边界是否贴合网格行——等 outline 对齐了，再换回 background-color。很多所谓“背景失效”，其实是你一直没看清它到底占了多大地方。
真正影响背景可见性的，往往是子项自己的 background-color
网格容器的背景默认只画在自身范围内，不会穿透到子项背后。如果你给容器设了渐变背景，但每个 grid-item 都是白色底色，那看到的永远是白块，不是容器背景没生效。
- 想让容器背景透出来？所有直接子项必须设
background-color: transparent - 子项需要自己有底色？那就别指望靠容器背景“贯穿”，改用
border+box-sizing: border-box模拟间隙边框，或用伪元素定位 - 检查是否有
isolation: isolate或mix-blend-mode干扰了层叠顺序，导致背景被意外隐藏
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
