please understand me ,How to do this challenge
**MY CODE👇👇**
<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 */
/* 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/100.0.4896.127 Safari/537.36
Challenge: Divide the Grid Into an Area Template
Link to the challenge:
Did you see the part they already filled in for you:
/* Only change code below this line */
"header header header"
"advert content content"
"advert footer footer";
/* Only change code above this line */
}
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.
hmm… it looks like the header is taking up (spanning across) the whole top row.
Then the advert column takes up some of the content row and the content spans the rest of that middle row.
Finally, the advert column is also taking up some of the footer row and the footer spans the rest of that bottom row.
That code that has the “advert” column taking up part of the footer row, the challenge wants you to modify it so that the footer takes up the whole row.
please show me full solution
/* Only change code below this line */
"header header header"
"advert content content"
"advert footer footer";
/* Only change code above this line */
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.
You just need to change the advert in the last line into footer.
see my code and find my mistake because this code is not submitting
<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 footer footer"
"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>
I am also sharing you a screenshot of my code ,So you can check and find mistake easily
@ANSHUL_SONI
All you need to do is reset the lesson and change the advert in the last line of the
"header…
"advert…
"advert…
to footer
1 Like
If you just want the solution, there are links to that on the hints page. But I don’t know how you are going to learn anything that way.
That’s why I gave you a hint and not a solution. 

**don’t say like that **
I learn anything in my way ok​:rage:

see my certificate of responsive web design "I have completed my self