Divide the Grid Into an Area Template- what is the problem here

Tell us what’s happening:

Your code so far


<style>
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}
  .item5{background:PaleGreen;}
  
  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
    /* change code below this line */
    
    grid-template-areas:
      "header header header"
      "."
      "footer footer footer";
    /* change code above this line */
  }
</style>
  
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 7.1.1; XT1562 Build/NPD26.48-24-1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.123 Mobile Safari/537.36 EdgA/42.0.0.2233.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/css-grid/divide-the-grid-into-an-area-template

You have deleted the second row completely and replaced it with the dot, it’s wrong, see the instruction, it says to change only the advert cell, not the entire row
" " This is one row, and the values (advert, header, content, footer) are cells

you should keep the content girds, so your grid-template-areas code should like this:

grid-template-areas:
      "header header header"
      ". content content"
      "footer footer footer";