CSS Grid - Divide the Grid Into an Area Template

[DYNAMICMORTAL]

Tell us what’s happening:
Describe your issue in detail here.

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;
    grid-template-areas:"header header header"
      "advert content content"
      "advert footer footer";
  }
</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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Challenge: CSS Grid - Divide the Grid Into an Area Template

Link to the challenge:

freeCodeCamp.org

[DobarBREND]

Welcome to our community!

The instruction: “Change the template so the footer area spans the entire bottom row. Defining the areas won’t have any visual effect right now. Later, you will make an item use an area to see how it works.”

If you want a section to span the entire row, take a look at the first line:

"header header header" ----the header will span the entire row

Use analogy for the ‘footer’ row.