I simply don't understand

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;
  /* Only change code below this line */

grid-area: 3/4/1/3
  /* 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_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Safari/605.1.15.

Challenge: Use grid-area Without Creating an Areas Template

Link to the challenge:

The problem says that to change the grid area along third and fourth horizontal lines, and first and fourth vertical lines.

Try playing around with these and trying the combinations.
It would be easy for you to find how it is working after solving.

Hint:

grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;

This hint given by free code camp will be sufficient for you to solve this problem

Thank you for the reply. I admit I saw that, I also admit that im not understanding what to do with it. Do I type it in exactly like that or do I have to come up with the corresponding numbers? I think ill be taking a break right now. Thanks.

1 Like

third and fourth are horizontal lines in the grid-area:
for example in…

grid-area: 3/4/1/3;

3 and 1 are horizontal lines to start at and end at respectively.
4 and 3 are vertical lines to start at and end at respectively.

Now look at the problem like this
3 and 4 horizontal lines, and 1 and 4 vertical lines

1 Like

Thank you! I definitely will be spending more time on this subject.

1 Like

Still cant figure it out, this is my wall for the day lol.

1 Like

grid-area: horizontal start/vertical start/horizontal end/vertical end.

the given problem is
third and fourth horizontal lines, and first and fourth vertical lines .

horizontal start is 3
horizontal end is 4
vertical start is 1
vertical end is 4

Ill keep trying, thank you for the time.

1 Like