What's happening?

[ati]

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 */
   grid-template-areas:
    "header header header"
    ". content content"
    "footer 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/92.0.4515.131 Safari/537.36

Challenge: Divide the Grid Into an Area Template

Link to the challenge:

freeCodeCamp.org

[ArielLeslie]

@ati

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

What???

[ati]

i wrote the same code as was said but it is still saying is container class should have a grid-template-areas property similar to the example but with the footer area spanning the whole bottom row.
i wrote this

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

can’t figure out…

[jwilkins.oboe]

I would reset the lesson.

Read the instructions more carefully

@ati

container class should have a grid-template-areas property similar to the example

It is already telling your it should be similiar to the example so you just need to edit the bottom row.
There is no need to touch the middle row.

Hope that helps!

[ati]

it worked but in the hint video it was like this what i did . can you see that please?

[elisa]

@ati

grid-template-areas:
  /* Only change code below this line */
   grid-template-areas:

You re-wrote “grid-template-areas” whereas it was already written. Therefore it was making everything bug.

[jwilkins.oboe]

I checked the hint and video and it seems like it is talking about a different challenge.

Even the starter code isn’t the same in the video.

I’ll bring up an issue on github.

[acevicky5]

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

  So this is the question ..you should work on the problem more effectively the answer is right in the question .

   "footer-footer-footer"

This is only what we have to do so…