网格区域不会移动到具有百分比值的网格行中

【问题标题】：Grid area won't move into grid rows with percentage values网格区域不会移动到具有百分比值的网格行中
【发布时间】：2018-05-22 22:53:23
【问题描述】：

我可以让 div 移动到正确的列但不是正确的行。

这将在正确的列中显示蓝色矩形，但无论出于何种原因，它都没有移动到我需要它的行中。谢谢大家的帮助。

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 10% 80% 10%;
}

#navigation {
  grid-column: 2/2;
  grid-row: 2/2;
  height: 400px;
  width: 100%;
  background-color: blue;
}

<div id="navigation"></div>
<div id="menunBar"></div>
<div id="mainContent"></div>

【问题讨论】：

标签： html css css-grid

【解决方案1】：

您使用百分比来设置行高。这意味着a parent reference is required。

在网格容器上设置高度。

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 10% 80% 10%;
  height: 100vh; /* new */
}

#navigation {
  grid-column: 2/3; /* error correction */
  grid-row: 2/3;
  background-color: blue;
}

body {
  margin: 0;
}

<div id="navigation"></div>
<div id="menunBar"></div>
<div id="mainContent"></div>

更多细节：

【讨论】：