通过将父元素设为单格 css grid 容器，可使无内容、零样式子元素自动100%填充其宽高，无需在子元素上声明任何 css 规则。
通过将父元素设为单格 css grid 容器，可使无内容、零样式子元素自动100%填充其宽高，无需在子元素上声明任何 css 规则。
在实际开发中，常需让空子元素（如占位层、蒙版或背景容器）严格匹配父容器的尺寸，但又受限于无法修改子元素的样式（例如第三方组件封装、CSS-in-JS 约束或设计系统规范）。此时，不依赖子元素自身样式、不使用伪元素、不引入 JavaScript 的最优解是利用 CSS Grid 的默认填充行为。
只需将 .parent 设置为 display: grid，并保持其显式宽高（如 width: 200px; height: 100px;），Grid 容器会自动创建一个单行单列的网格轨道——而唯一的子元素 .child 将自然流式占据该唯一网格区域的全部空间，等效于 width: 100%; height: 100%，且完全无需在 .child 上设置任何样式。
.parent {
display: grid; /* 启用 Grid 布局 */
width: 200px;
height: 100px;
outline: 1px solid red; /* 用于可视化边界 */
/* 注意：无需设置 grid-template-rows/columns —— 默认各为 auto，但子元素会自动拉伸填满 */
}
/* .child 保持完全无样式 —— 这正是本方案的核心要求 */<div class="parent"> <div class="child"></div> </div>
✅ 优势说明：
- 兼容性良好（现代浏览器及 IE11+ 支持 display: grid）；
- 语义清晰、代码极简，符合“父控子”设计原则；
- 不影响子元素的盒模型、继承属性或后续动态内容注入。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 若父元素存在 padding，子元素将默认包含在 content box 内（即实际尺寸 = 父 content area），如需撑满含 padding 区域，需配合 grid-template 显式定义轨道（如 grid-template: 1fr / 1fr）；
- 避免与 float 或 inline-block 等旧布局混用；
- Flexbox 方案（如 display: flex）虽也可实现，但需额外设置 flex: 1 或 align-items: stretch，且对单子元素场景不如 Grid 简洁可靠——Grid 是目前最直接、最符合约束条件的原生解决方案。
