Divide this following Grid Into an Area Template

can anyone tell me what to do here??? :point_down: :point_down:
it is saying-" 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."

  **Your code so far**


.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;
  /* Only change code below this line */
    "header header header"
    "advert content content"
    "advert footer footer";
  /* Only change code above this line */

<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>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.82 Safari/537.36

Challenge: Divide the Grid Into an Area Template

Link to the challenge:

THE TUTORIAL ASKS US TO: Change the template so the footer area spans the entire bottom row.

What does it like for footer to span the whole row?

A row with only the word “footer” Declared



If we wanted the Advert to span the bottom: we would write:
"advert advert advert"

1 Like

thanks alless, i added footer two times in a row then later changes it to three times and it worked!!!

1 Like

Good, I’m glad you got it to work for you.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.