CSS Grid divide Area

HTML-CSS
1

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

  **Your code so far**


<style>
.item1{background:LightSkyBlue;border:solid;}
.item2{background:LightSalmon;border:solid;}
.item3{background:PaleTurquoise;border:solid;}
.item4{background:LightPink;border:solid;}
.item5{background:PaleGreen;border:solid;}

.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"
    " \"" \"" \""                 "
    ;

  /* 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; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36 OPR/86.0.4363.59 (Edition Campaign 34)

Challenge: Divide the Grid Into an Area Template

Link to the challenge:

2

Hi @MoeMoe-123 !

Welcome to the forum!

I would suggest resetting the lesson.

This was the starter code

  grid-template-areas:
    /* Only change code below this line */
      "header header header"
      "advert content content"
      "advert footer footer";
    /* Only change code above this line */
  }

The lesson wants you to change the template so the footer area spans the entire bottom row.
It looks like in your first attempt you got rid of the footer completely.
This is incorrect

The is the bottom row you need to make changes to so the footer spans the whole row.

"advert footer footer";

Hope that helps!

3

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