This whole topic is not getting into my head!

HTML-CSS
1
.item1{background:orange;} .item2{background:brown;} .item3{background: White;} .item4{background: Pink;} .item5{background:Green;} .container { font-size: 40px; min-height: 300px; width: 100%; background-color: red; background: LightGray; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-gap: 10px 20px; /* change code below this line */ grid-template-areas: "header header header" ". . ." "footer footer footer"; /* change code above this line */ }
1
2
3
4
5
```

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

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

2

grid-template-areas:
“header header header”
“advert content content”
“footer footer footer”;

The above is the example, which you have implemented

In addition to custom labels, you can use a period (.) to designate an empty cell in the grid.

It says in place of the word like advert or content or header, if the period is placed, then it acts as an empty cell
NOTE: header, advert, footer, content each word acts as a cell and the content between " " acts as a row

container class should have a grid-template-areas property similar to the preview but has . instead of the advert area.

Now you have to make the advert as an empty cell, to make an empty cell, you have to place the (.) in the cell

1 Like
3

Thanks. It really helped me to understand this whole of grid thingy!