CSSGrid子元素自动填充剩余空间方法

本篇文章给大家分享《CSS Grid子元素自动填满剩余空间》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

使用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 单位代表“自由空间比例单位”，它会根据可用空间自动分配尺寸。

例如，将一个容器分为两列，第一列固定宽度，第二列占满剩余空间：

如果想让某一行或列中的某个子元素跨多个轨道并撑满可用空间，也可以通过设置 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 单位可实现灵活分配。比如三列布局，中间自适应，两边固定：

此时中间列会自动占据左右固定列之外的所有剩余空间。

如果有多个自适应列：

4. 避免内容撑破布局

有时子元素内部内容过多会导致无法收缩。可通过以下方式控制：

• 设置 min-width: 0 或 overflow: hidden
• 避免使用 white-space: nowrap 导致文本不换行

.item {
  min-width: 0;
  overflow: hidden;
}

基本上就这些。合理利用 fr 单位和容器高度控制，就能让 Grid 子元素自然占满剩余空间，无需 JavaScript 计算。关键是理解 Grid 的空间分配机制和子元素默认对齐行为。不复杂但容易忽略细节。

到这里，我们也就讲完了《CSSGrid子元素自动填充剩余空间方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！