Grid area won't move into grid rows with percentage values

Question

I can get the div to move to the correct column but not the correct row.

This will display the blue rectangle in the correct column, but for whatever reason it isn't moving in to the row I need it to. Thank you all for your help.

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>

Answer 1

You're using percentages to set the row heights. That means that a parent reference is required.

Set a height on the grid container.

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>

More details:

• Why is percentage height not working on my div?
• How to make a div 100% height of the browser window?
• What's the difference between grid-column value 1/1 and 1/2?