Divs not spanning vertically using CSS Grid

I'm trying to make a simple layout as I'm learning CSS Grid.

The layout should be as follows:
"header header header"
"adv content content"
"adv footer footer"

What I'm getting is this:
"header header header"
"adv content content"
". footer footer"

The div "adv" never takes the vertical space, doesn't matter if I do it using template-areas as above or using grid-row and columns as the code below. In fact, I'm not able to manipulate any of my divs vertically. I cannot make them span several rows. Can somebody maybe tell me what I'm doing wrong?

body {
  background: dimgray;
}

div {
  height: 200px;
  font-size: 50px;
  font-family: sans-serif;
  color: floralwhite;
}

.header {
  background-color: lightcoral;
  grid-column: 1 / 4;
}


/*Div having the issue below*/

.adv {
  background-color: blue;
  grid-row: 2/4;
  /*Expecting to span from row 2 to 4, but not happening.*/
}


/*Div having the issue above*/

.content {
  background: pink;
  grid-column: 2/4;
}

.footer {
  background-color: salmon;
  grid-column: 2/4;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

<body>
  <div class="container">

    <div class="header">header
    </div>

    <div class="adv">adv
      <!--Div with the issue-->
    </div>

    <div class="content">content
    </div>

    <div class="footer">footer</div>



  </div>
</body>

Solution

Your grid layout is fine, the problem is with: div {height: 200}, remove the height and it will work as expected.