嵌套网格布局问题：seven元素过高且空间浪费，如何修复？

我想要实现如下目标布局：

但实际输出效果却是这样：

尽管已经设置了0.1fr的行高，seven元素仍然尺寸过大，布局还存在额外的高度空间，我没法缩小seven元素的高度，该怎么修复？

原尝试代码 #

HTML

<div class="container">
  <div class="header">header</div>
  <div class="one">one</div>
  <div class="two">two</div>
  <div class="three">three</div>
  <div class="four">four</div>
  <div class="nested-container">
    <div class="five">five</div>
    <div class="six">six</div>
    <div class="seven">seven</div>
  </div>
</div>

CSS

.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  grid-template-rows: 0.1fr 1fr 2fr 0.1fr;
  height: 100vh;
  width: 100vw;
}

* {
  margin: 0;
  padding: 0;
}

.header {
  grid-column-start: 1;
  grid-column-end: 5;
  background-color: lightgreen;
  /* height: 20px; */
}

.one {
  grid-row-start: 2;
  grid-row-end: 4;
  background-color: lightpink;
}

.two {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
  background-color: lightblue;
}

.three {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 3;
  background-color: maroon;
}

.four {
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 2;
  grid-row-end: 3;
  background-color: burlywood;
}

.nested-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.five {
  background-color: blue;
  grid-column-start: 1;
  grid-column-end: 2;
}

.six {
  background-color: red;
  grid-column-start: 2;
  grid-column-end: 3;
}

.seven {
  background-color: green;
  grid-column-start: 1;
  grid-column-end: 3;
}

修复方案 #

问题根源

1. nested-container未指定在主Grid中的位置，导致它没有填充到预设的第三行空间，反而额外占用高度。
2. 嵌套Gridnested-container没有设置行高规则，seven元素默认会拉伸以占用剩余空间，导致高度过大。

修改后的CSS代码

.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  grid-template-rows: auto 1fr 2fr auto; /* 用auto让header和底部行自适应内容，更灵活 */
  height: 100vh;
  width: 100vw;
}

* {
  margin: 0;
  padding: 0;
}

.header {
  grid-column: 1 / 5; /* 简化写法 */
  background-color: lightgreen;
}

.one {
  grid-row: 2 / 4; /* 简化写法 */
  background-color: lightpink;
}

.two {
  grid-area: 2 / 2 / 3 / 3; /* 简化写法 */
  background-color: lightblue;
}

.three {
  grid-area: 2 / 3 / 3 / 4; /* 简化写法 */
  background-color: maroon;
}

.four {
  grid-area: 2 / 4 / 3 / 5; /* 简化写法 */
  background-color: burlywood;
}

.nested-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 0.1fr; /* 给嵌套Grid设置行比例，控制seven的高度 */
  grid-column: 2 / 5; /* 指定嵌套容器在主Grid的列位置 */
  grid-row: 3 / 4; /* 指定嵌套容器在主Grid的行位置 */
}

.five {
  background-color: blue;
}

.six {
  background-color: red;
}

.seven {
  grid-column: 1 / 3;
  background-color: green;
}

关键修改点

• 给nested-container添加grid-column: 2 / 5和grid-row: 3 / 4，让它准确填充到主Grid的第三行、第2-5列区域。
• 给nested-container设置grid-template-rows: 1fr 0.1fr，让five+six占据嵌套容器的大部分空间，seven只占小部分高度。
• 简化了Grid位置的写法（比如用grid-column代替grid-column-start/end），代码更简洁。
• 主Grid的行改用auto代替0.1fr，让header和底部行自适应内容高度，避免fr单位可能带来的最小高度限制。

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