通过将父元素设为单格 css grid 容器，可使无内容、无样式的子元素自动 100% 填充其宽高，无需触碰子元素的任何 css 属性。
通过将父元素设为单格 css grid 容器，可使无内容、无样式的子元素自动 100% 填充其宽高，无需触碰子元素的任何 css 属性。
在纯 CSS 场景下，若需让空的 .child 元素完全占据 .parent 的全部宽高（200px × 100px），且禁止对 .child 设置任何样式（包括 width/height/min-height、display、position、伪元素等），传统方案如 absolute 定位或 flex 均需干预子元素（如 flex: 1 或 position: absolute），不符合约束条件。
✅ 最简洁合规的解法是：仅修改 .parent 为单单元格 Grid 容器：
.parent {
display: grid; /* 启用网格布局 */
width: 200px;
height: 100px;
outline: 1px solid red; /* 保留原边框用于视觉验证 */
}
此时，.child 作为父容器中唯一的网格项（grid item），会自动拉伸以填满整个网格区域（即整个父容器），等效于设置了 grid-area: 1 / 1 / -1 / -1，且无需任何额外声明。
⚠️ 注意事项：
- 父元素必须显式定义 width 和 height（如题设），否则 Grid 容器自身尺寸不确定，子元素无法“撑满”；
- 不要为 .child 设置 margin、padding 或 border（除非设计所需），否则会影响其可视尺寸（但逻辑尺寸仍为 100%）；
- 此方案兼容所有现代浏览器（Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+），无需前缀；
- 避免使用 float、inline-block 或 table-cell 等老式布局方式——它们均无法在不设置子元素样式前提下实现可靠填充。
总结：CSS Grid 的天然流式填充特性，使其成为此类“零子元素样式”需求的理想选择。只需一行 display: grid，即可优雅解耦父子样式依赖，兼顾语义清晰与维护性。
