CSS Grid - Divide the Grid Into an Area Template

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
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

<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"
      "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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36

Challenge: CSS Grid - Divide the Grid Into an Area Template

Link to the challenge:

2

Welcome to our community!

Only the ‘footer’ area spans the entire BOTTOM row. You have changed the previous row. That is not required here. The ‘header’ cells put in the first row are the example of what you have to do, but only for the bottom row and for the ‘footer’ cells.

3

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