align-items: stretch 默认生效但子元素未撑满，是因为父容器缺乏明确高度上下文；需确保父容器有具体高度（如100vh）、无尺寸限制（如inline-grid）、且Grid轨道可计算（如配合min-height），同时注意align-self与内部溢出影响。
align-items: stretch 是默认值，但为什么子元素还是没撑满？
因为 align-items: stretch 只在父容器有**明确高度上下文**时才生效。如果 .grid-container 的 height 是 auto、min-height 未触发，或被外层 flex/grid/浮动限制了可用高度，那 stretch 就“无空间可伸”——它不会凭空造高，只会把子项拉伸到已分配的轨道高度里。
常见错误现象：grid-template-rows: 1fr 写了，子项也设了 align-self: stretch，但实际高度仍只包内容。
- 检查父容器的
Computed Height（开发者工具 → Computed → height）是否为具体数值（如400px或100vh），而非auto - 若父容器是 flex 子项，需额外加
flex: 1或height: 100%让它先占满可用空间 - 若父容器用了
max-width: fit-content或display: inline-grid，会抑制宽度/高度扩展，改用display: grid+width: 100%
align-items 和 align-self 的关系别搞混
align-items 控制所有子项在交叉轴（垂直方向）的默认对齐方式，而 align-self 是单个子项的覆盖设置。两者都影响“是否拉伸”，但作用层级不同。
-
align-items: stretch（默认）→ 所有子项默认拉伸填满所在行高度 -
align-self: stretch→ 强制某一个子项拉伸，哪怕父容器设了align-items: start -
align-self: start→ 该子项不再拉伸，按内容高度顶对齐，此时即使父容器有高度，它也不会占满
容易踩的坑：调试时只改了 align-self 却忘了父容器本身没高度，或者误以为 align-self: center 也能撑高——它只是居中摆放，不改变自身高度。
立即学习“前端免费学习笔记（深入）”；
Grid 轨道尺寸必须可计算，1fr 不是万能药
1fr 表示“分配剩余自由空间”，但它依赖父容器先有确定的尺寸。如果 grid-template-rows: 1fr 生效了，但子元素仍不撑满，问题大概率出在轨道本身没拿到高度。
- 确保容器有
height或min-height（如min-height: 100vh），且未被overflow: hidden或contain: layout干扰计算 - 避免在 Grid 容器上同时写
height: 100%和min-height: 100vh—— 后者可能被忽略，导致百分比基准丢失 - 若使用多行布局（如
grid-template-rows: auto 1fr auto），确认目标子项确实落在1fr那一行（用grid-row显式指定更稳妥）
子元素内部内容溢出会破坏撑满效果
即使 align-self: stretch 生效、轨道高度也正确，子元素内部一段长文本、一张未约束的图片或一个 position: absolute 子节点，都可能导致它视觉上“撑破”容器边界，看起来像没撑满。
- 给子元素加
min-height: 0（尤其当它是 flex 容器时，防止 flex item 默认最小高度干扰） - 设
overflow: hidden或overflow: auto控制溢出表现 - 若子元素含绝对定位内容，确保其父级（即 Grid 子项）有
position: relative，且自身高度不依赖内部绝对定位元素反向撑开 - 慎用
height: 100%在子元素上——它和align-self: stretch功能重复，还可能因继承链断裂失效
真正卡住的往往不是对齐属性本身，而是高度计算链中某个环节缺失了明确尺寸声明，或者盒模型（box-sizing、padding、border）让视觉高度和逻辑高度错位。动手前先看一眼开发者工具里的“Layout”面板，比猜参数快得多。
