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/

＆＃13;

＆＃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%; }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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。

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;