What does this do its not clear whats the point of this

Tell us what’s happening:

  **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 content content"
    "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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36.

Challenge: Divide the Grid Into an Area Template

Link to the challenge:

What does this do its not clear whats the point of this

Can you be more specific? What is the “this” in that sentence?

I dont get the point of grit-templet-areas

I haven’t done this section (it was built after I did the program) but it might become apparent in the following lessons.

The grid template areas allows you to control the layout of the content by typing in the div types inside of the grid that you set up in grid-template columns and grid-template rows. There are three columns and three rows, so nine spots for content. This gives you the ability to customize the columns and rows by increasing or decreasing them and designate how much of the screen that you want to allocate to a certain div type. For instance the header spans across the entire top three sections of the grid.

The point of this challenge is to show you how to insert blank spaces into the grid. Replacing the word advert with a period ( . ) to designate the blank space. The challenge is a bit silly and obtuse, but if you start using the grid layout there may be times when you want to create some blank spaces in the layout. I think of it kind of like the break line tag in html.

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