Divide the Grid Into an Area Template - original code and its interpretation

HTML-CSS
1

Hi there,
I sincerely apologize if the same question has been asked before, did a search but I still don’t see an answer to my question. The thing is, I don’t see how the right hand size browser pane reflects the following:

“header header header”
“advert content content”
“footer footer footer”

Why is there no content for example at the end of the second row if it says “advert content CONTENT”? And what is “advert”? Is it a place preserved for website ads or something? I have been breezing through the program but just got hung upon this concept. I would like to know how the code is reflected in what I see in the browser pane on the right hand side at the beginning of the challenge before the solution of the exercise.

Could anyone kindly point me in the right direction? Thanks in advance.

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;
    /* change code below this line */
    
    grid-template-areas:
      "header header header"
      "advert content content"
      "footer footer footer";
    /* 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/65.0.0.1617 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/css-grid/divide-the-grid-into-an-area-template

2

The “grid-template-areas” property is used to designate where you want your grid elements to be placed within the grid. You do this by applying the name you’ve picked in your grid matrix to the element with the “grid-area” property. For example:

<style>
  .item1 {
    grid-area: advert;
}
</style>

…would place the element with the class “item1” in the grid-area named “advert”.

In this case the “grid-template-areas” matrix is laid out, but the “grid-area” property has not been applied to any of the elements, so there would be no effect.

The functions of the grid will be more clearly explained over the next few challenges. Just hang tight!

3

Thankee kindly! To be honest, just passed upon that challenge by typing in the solution without a thorough understanding and carried on with the subsequent challenges. Saved your reply in my files in order to revisit the concept later. Thanks again!

1 Like
4

I’m a beginner just like you and I will tell you that CSS Grid is amazing once you start to “get” it. It makes creating a layout so much easier in my opinion.

5

Thanks for the encouragement, I can really do well with it! I love the technical details behind the scenes and hope the grid will also “sink in”. Good luck with your endeavors!