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>