子元素不撑满单元格的根源是父容器未启用真正的grid上下文；需确保display: grid、父容器有明确宽高、网格轨道尺寸确定，且子元素无阻断拉伸的样式。
子元素不撑满单元格？先确认容器是真正的 grid
很多情况下 justify-items: stretch 或 align-items: stretch 看似无效，根本原因是父容器没真正启用 Grid 格式化上下文。检查是否写了 display: grid（不是 flex、block 或 inline-grid 以外的值）。display: subgrid 也需确保父网格已定义轨道，否则行为不可靠。
为什么写了 stretch 还是没填满？三个硬性前提缺一不可
Grid 子元素拉伸填满单元格，依赖的是 align-items: stretch（默认值）和 justify-items: stretch（默认值），但它们只在满足以下条件时才生效：
- 父容器有可计算的高度或宽度（如
height: 100vh、width: 800px；height: auto不行） - 对应方向的网格轨道必须有确定尺寸：例如
grid-template-rows: 1fr、200px、minmax(200px, 1fr)可以；而auto、min-content、max-content会导致“无可拉伸空间” - 子元素自身不能阻断拉伸：避免设置
height、max-height、width、max-width；若用了min-width: 0或overflow: hidden是为了防内容撑破，不是为了触发拉伸
用 grid 让空子元素自动填满宽高？只需父元素一行代码
对完全空白、无样式、无内容的子元素，想让它 100% 填满父容器宽高，最简方案是：只改父元素，不碰子元素任何样式：
- 父元素设
display: grid - 父元素必须有明确的
width和height（不能靠内容撑开） - 不要写
grid-template-rows或grid-template-columns—— 保持隐式单格轨道，浏览器会自动创建 1×1 网格，子元素作为唯一网格项，默认stretch拉伸填满 - 避免
float、position: absolute、display: inline-block等脱离常规流的属性干扰
示例：
.parent { display: grid; width: 300px; height: 200px; }此时 .child 即使是空 <div></div>，也会完整覆盖该区域。
width: 100% 在 grid item 里基本没用，别白费劲
Grid item 的尺寸由网格轨道（grid-template-columns/grid-template-rows）决定，不是由父容器宽高继承而来。因此：
-
grid-template-areas中写width: 100%完全无效——它只做区域映射，不控制尺寸 - 即使
grid-column: 1 / -1跨满整行，width: 100%依然被忽略，因为计算宽度来自轨道分配 - 真正起作用的是让轨道自己“填满”：用
1fr、100%（当父容器宽度确定时）、或minmax(0, 1fr) - 如果目标是让 item 内部内容填满单元格，应操作内容本身（如子
div设width: 100%），而非 item 自身
容易被忽略的一点：背景色没“看起来填满”，大概率是 box-sizing: content-box + padding 导致背景只画在内边距以内，调试时建议先用 outline 验证真实尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
