使用 fr 单位合理划分网格轨道，结合 flex-grow 控制子元素拉伸，可解决子元素无法填满父容器的问题。1. fr 用于 grid-template-columns/rows 按比例分配可用空间，实现自适应列或行；2. 子元素需设置 width/height: 100% 或 display: flex 并配合 flex-grow: 1 来填满所在网格区域；3. fr 负责“格子怎么分”，flex-grow 负责“内容在格子里怎么撑”；4. 典型应用：固定侧边栏 + 自适应主内容区用 fr 分割，主内容区内多面板垂直布局时用 flex + flex-grow 填满高度。二者协同实现完整填充。
在使用 CSS 网格布局时，有时子元素无法填满父容器，尤其是在动态内容或响应式场景下。这个问题通常是因为网格轨道大小设置不合理，或者子元素未正确拉伸。结合 fr 单位 和 flex-grow 可以有效解决这类问题，但需要注意它们的作用范围和使用方式。
使用 fr 单位让网格轨道自动分配空间
fr（fraction）单位表示可用空间的“份数”，适合用于 grid-template-columns 或 grid-template-rows 中，让列或行按比例占据剩余空间。
例如：
.container {
display: grid;
grid-template-columns: 1fr 2fr; /* 左侧占1份，右侧占2份 */
height: 400px;
}
这样，两列会自动填满容器宽度。如果希望某列固定宽度，其他列自适应，可以混合使用：
grid-template-columns: 200px 1fr; /* 固定左栏，右栏填满剩余空间 */
确保子元素在网格单元内拉伸
即使网格轨道正确分配了空间，子元素默认不会自动填满所在网格区域。此时需要单独设置子元素的尺寸或使用 flex 布局增强控制。
立即学习“前端免费学习笔记（深入）”；
解决方案：- 给子元素设置 height: 100% 或 width: 100% 来填充网格格子
- 将子元素设为 display: flex，并配合 flex-grow: 1
.item {
display: flex;
flex-direction: column;
}
<p>.item > <em> {
flex-grow: 1; /</em> 让内部内容拉伸填满 */
}
fr 与 flex-grow 的协作逻辑
fr 是作用于网格容器的轨道划分，决定每个网格区域有多大；而 flex-grow 是在某个网格项内部，控制其子元素如何分配剩余空间。两者层级不同，但可以协同工作。
典型场景：- 网格划分主结构（如侧边栏 + 主内容区）用 fr
- 主内容区内多个面板垂直分布，希望填满高度，就在该区域内使用 flex + flex-grow
.main-content {
display: flex;
flex-direction: column;
}
<p>.panel {
flex-grow: 1; /<em> 最后一个 panel 自动撑到底 </em>/
}
基本上就这些。关键是理解：fr 解决“格子怎么分”，flex-grow 解决“内容在格子里怎么撑”。搭配使用，就能实现整体布局既灵活又完整地填满父容器。
