使用fr单位和stretch对齐可让Grid子元素占满剩余空间：1. 用fr按比例分配可用空间，如grid-template-columns:200px 1fr；2. 设置容器高度并让子元素height:100%或align-self:stretch；3. 多列时用多个fr平分剩余空间，如1fr 2fr按1:2分配；4. 防内容溢出需设min-width:0和overflow:hidden。
在使用 CSS Grid 布局时，让子元素自动占满容器的剩余空间，关键在于正确设置网格轨道（grid tracks）和子元素的尺寸行为。下面介绍几种常见且有效的方法。
1. 使用 fr 单位分配剩余空间
Grid 中的 fr 单位代表“自由空间比例单位”，它会根据可用空间自动分配尺寸。
例如，将一个容器分为两列，第一列固定宽度，第二列占满剩余空间：
.container {display: grid;
grid-template-columns: 200px 1fr; /* 第一列200px，第二列占剩余空间 */
}
如果想让某一行或列中的某个子元素跨多个轨道并撑满可用空间，也可以通过设置 grid-column 或 grid-row 实现。
立即学习“前端免费学习笔记（深入）”；
2. 子元素设置 height: 100% 或 stretch
默认情况下，Grid 子元素的内容区域不会自动拉伸填满整个网格单元格的高度。为了让子元素在纵向上占满剩余空间，可以：
- 确保父容器有明确高度
- 设置子元素 align-self: stretch（默认值就是 stretch）
- 必要时给子元素设置 height: 100%
.container {
display: grid;
height: 100vh; / 提供参考高度 /
grid-template-rows: 1fr;
}
.item {
height: 100%; / 填满所在行的高度 /
}
3. 多个子元素平分或按需占用剩余空间
使用多个 fr 单位可实现灵活分配。比如三列布局，中间自适应，两边固定：
.container {display: grid;
grid-template-columns: 100px 1fr 100px;
}
此时中间列会自动占据左右固定列之外的所有剩余空间。
如果有多个自适应列：
grid-template-columns: 1fr 2fr; /* 按 1:2 分配剩余空间 */4. 避免内容撑破布局
有时子元素内部内容过多会导致无法收缩。可通过以下方式控制：
- 设置 min-width: 0 或 overflow: hidden
- 避免使用 white-space: nowrap 导致文本不换行
.item {
min-width: 0;
overflow: hidden;
}
基本上就这些。合理利用 fr 单位和容器高度控制，就能让 Grid 子元素自然占满剩余空间，无需 JavaScript 计算。关键是理解 Grid 的空间分配机制和子元素默认对齐行为。不复杂但容易忽略细节。
