Divide the Grid Into an Area Template dont work

HTML-CSS
1

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

  **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:
  "header header header"
  ". content content"
  "footer footer footer";
}
</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/92.0.4515.131 Safari/537.36

Challenge: Divide the Grid Into an Area Template

Link to the challenge:

2

We’ll need a bit more information.

What doesn’t work?

How doesn’t it work?

What should it do?

What is it doing instead?

What do the failing tests say?

3

the grid-template-area , I don’t know the answer, the hint doesn’t work.

4

You have put a dot on the 2nd row where there should be advert. A dot is for an empty space.

5

Please actually talk to us instead of asking us to give you the answer. We don’t write answers for people on the forum.

Learning how to talk about code is actually a critical programing skill.

1 Like
6

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