如何让CSS Grid中的最后一行占据全部可用垂直空间？

要实现.main-content内的.r3（r3c1与r3c2所在行）占据剩余垂直空间，核心问题是嵌套的.container网格容器未占满父元素.main-content的高度，导致其中的1fr行没有可用的剩余空间分配。只需两步修改即可解决：

1. 让.main-content的高度铺满其父网格项空间，并处理padding避免溢出
2. 让.container的高度铺满.main-content空间

修改后的完整代码 #

CSS

html,
body {
  margin: 0;
  padding: 0;
}

.app-root {
  display: flex;
  height: 100vh;
  background-color: #e0e0e0;
}
.app-grid {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 30px;
  grid-auto-columns: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "navbar navbar"
    "sidebar main-content"
    "statusbar statusbar";
}

.navbar {
  grid-area: navbar;
  background-color: yellow;
}

.statusbar {
  grid-area: statusbar;
  background-color: black;
  color: white;
}

.sidebar {
  grid-area: sidebar;
  background-color: red;
}

.main-content {
  grid-area: main-content;
  padding: 12px;
  background-color: blue;
  /* 新增：确保高度铺满父元素，同时padding不溢出 */
  height: 100%;
  box-sizing: border-box;
}

.container {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-rows: auto auto 1fr;
  gap: 15px 15px;
  grid-template-areas:
    "r1 r1"
    "r2 r2"
    "r3c1 r3c2";
  /* 新增：让容器铺满.main-content的高度 */
  height: 100%;
}

.r1 {
  grid-area: r1;
  background-color: turquoise;
}
.r2 {
  grid-area: r2;
  background-color: brown;
}
.r3c1 {
  grid-area: r3c1;
  background-color: orange;
}
.r3c2 {
  grid-area: r3c2;
  background-color: white;
}

HTML

<div class="app-root">
  <div class="app-grid">
    <div class="navbar">
      nav goes brrr
    </div>

    <div class=sidebar>sidebar goes brr</div>
    <div class=main-content>

      <div class="container">
        <div class="r1">r1
        </div>

        <div class="r2">r2
        </div>

        <div class="r3c1">r3c1
        </div>

        <div class="r3c2">r3c2
        </div>
      </div>

    </div>

    <div class="statusbar">
      status goes brrr
    </div>
  </div>
</div>

原理说明 #

• .main-content作为app-grid的网格项，默认align-self: stretch会铺满垂直空间，但需显式设置height:100%明确高度；box-sizing: border-box确保padding不会让元素超出父容器范围。
• .container设置height:100%后，其Grid布局拥有了明确的可用高度，此时grid-template-rows: auto auto 1fr中的最后一个1fr就会自动占据前两行（高度由内容决定）之外的所有剩余垂直空间。

内容的提问来源于stack exchange，提问作者boop