子元素填不满网格单元格主因是默认居中且不拉伸，应设 align-self 和 justify-self 为 stretch，并移除固定宽高限制；也可在容器设 align-items/justify-items 统一拉伸。
子元素无法填满网格单元格，通常不是网格本身的问题，而是子元素默认的对齐行为导致的——它默认居中对齐，且不拉伸。解决的关键在于用 align-self（控制垂直方向）和 justify-self（控制水平方向）显式设置子项在单元格内的对齐与尺寸行为。
让子元素撑满整个单元格
最直接的方式是把两个属性都设为 stretch（这是默认值，但有时被重置或继承干扰）：
.item {
align-self: stretch;
justify-self: stretch;
}
只要该子元素没有设置固定宽高（如 width、height、min-width 等硬性限制），它就会自动拉伸填满所在网格区域的全部空间。
注意父容器和自身尺寸的冲突
即使设置了 stretch，以下情况仍会导致“填不满”：
- 子元素设置了
width或max-width，限制了水平拉伸 - 设置了
height或max-height，限制了垂直拉伸 - 父网格容器（
grid-container）本身尺寸未明确（比如高度为auto且内容空，导致行高塌缩） - 该网格行/列使用了
min-content、max-content或auto，未给足空间
✅ 建议：检查并移除子元素的固定尺寸约束；必要时给网格容器或对应行列设置最小尺寸，例如：grid-template-rows: 1fr; 或 min-height: 200px;
替代方案：用 align-items / justify-items 统一设置
如果所有子项都需要填满，与其逐个写 align-self，不如在容器上统一控制：
.grid-container {
align-items: stretch;
justify-items: stretch;
}
这样所有直系子项默认就拉伸填满，个别需要特殊对齐的再单独用 align-self/justify-self 覆盖即可。
其他常用对齐值与适用场景
除了 stretch，这些值也常用于微调：
-
start：贴左上角对齐（不拉伸） -
end：贴右下角对齐 -
center：居中（默认，不拉伸） -
self-start/self-end：按自身 writing-mode 对齐
⚠️ 注意：stretch 只在轴向有可用空间时才生效；若子元素已有确定尺寸，它不会强行放大，只会居中或按对齐规则摆放。
基本上就这些。核心就是：先确保网格单元格有空间，再让子项主动“伸展”，而不是依赖默认行为。
