Need help on my coding below, I am new to CSS

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:
  /* Only change code below this line */
    "header header header"
    "advert content content"
    "advert footer footer";
  /* Only 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36

Challenge: Divide the Grid Into an Area Template

Link to the challenge:

Do you see the message in the console below the HTML editor after running the tests?

" container class should have a grid-template-areas property similar to the example but with the footer area spanning the whole bottom row."

I’m confident that after reading that you can figure out what you need to change.

1 Like

thanks man, I got it now. :slightly_smiling_face:

the “header” in the code runs across all 3 of the top columns.
you just need to get the footer to do the same.
“header header header”
“****** footer footer”
E_Z_P_Z :+1:

1 Like