Stuck - CSS - Please Help!

HTML-CSS
1

Tell us what’s happening:

Hi,

Not quite sure what Im supposed to be doing on this challenge. I thought it was asking to place the grid 5 in the place of number 4, clearly it isn’t. Please advise

Your code so far


<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}

.item5 {
  background: PaleGreen;
  /* Only change code below this line */

grid-area: 3/1/4;
  /* Only change code above this line */
}

.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;
}
</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_3) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.5 Safari/605.1.15.

Challenge: Use grid-area Without Creating an Areas Template

Link to the challenge:

2

Screenshot 2020-04-17 11.56.30
Screenshot 2020-04-17 11.56.303306×1432 558 KB

3

You’re to give four numbers;
horizontal line to start at
vertical line to start at
horizontal line to end at
vertical line to end at

You’re missing the vertical line to end at

1 Like
4

Iv tried that too…

Which combination of numbers should it be…?

5

That’s what you’re supposed to do.
From the lesson;
place the element with item5 class between the third and fourth horizontal lines and between the first and fourth vertical lines

horizontal line to start at is the first number and you’ve got that right
vertical line to start at is the second number and you’ve got that right
horizontal line to end at is the third number and you’ve got that right
so reading the lesson, what is the vertical line to end at?

1 Like
6

Thank you

GOT IT!

I think I found the wording confusing

7

Glad I could help.
Happy coding

1 Like