CSS 网格：50% 高度不适用于第二列

Question

我试图让 css 网格结构第二列中的行的高度达到 50%。

我有这个代码：

grid-template-areas: "green red"
                     "green blue";
grid-template-rows: 100% 50%;
grid-template-columns: 1fr 300px;

但是，该列的第一行较大。这是结果：

我尝试添加：

#page > .red { max-height: 50%; }

但这给了我：

如何让第二列中的两行的高度为 50%？

JSFIDDLE：https://jsfiddle.net/busr380n/13/

#page > .green {
  grid-area: green;
  background-color: green;
}

#page > .red {
  grid-area: red;
  background-color: red;
}

#page > .blue {
  grid-area: blue;
  background-color: blue;
}


#page {
  display: grid;
  width: 100%;
  height: 250px;

  grid-template-areas: "green red"
                       "green blue";
  grid-template-rows: 100% 50%;
  grid-template-columns: 1fr 300px;

}

#page > .red { max-height: 50%; }

<section id="page">
  <div class="green"></div>
  <div class="red"></div>
  <div class="blue"></div>
</section>

Answer 1

这是您的代码：

grid-template-areas: "green red"
                     "green blue";
grid-template-rows:  100% 50%;

您已经创建了两行。但是您已经为第一行提供了网格容器的 100% 高度。这会强制第二行存在于容器之外。

试试这个：

grid-template-areas: "green red"
                     "green blue";
grid-template-rows:  50% 50%;

不需要网格项目上的 max-height。

#page {
  display: grid;
  height: 250px;
  grid-template-areas: "green red"
                       "green blue";
  grid-template-rows: 50% 50%;
  grid-template-columns: 1fr 300px;
}

#page > .green {
  grid-area: green;
  background-color: green;
}

#page > .red {
  grid-area: red;
  background-color: red;
}

#page > .blue {
  grid-area: blue;
  background-color: blue;
}

<section id="page">
  <div class="green"></div>
  <div class="red"></div>
  <div class="blue"></div>
</section>

CSS 网格：50% 高度不适用于第二列

CSS Grid: 50% height not working on second column

html

css

css-grid

JSFIDDLE：https://jsfiddle.net/busr380n/13/