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

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>

Solution

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: