Issue with code1

HTML-CSS
1

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

I know the code for this project, but it is not working. When you find the problem can you please let me know what it was? Please assist…

  **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-column: 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/15.0 Safari/605.1.15

Challenge: Use grid-column to Control Spacing

Link to the challenge:

2

Hi @J0hni_5 !

Welcome to the forum!

It looks like you copied the example code here

But the challenge wants you to make the item with the class item5 consume the last two columns of the grid.

Your end result should look like this.
Screen Shot 2021-10-14 at 7.49.46 PM

You will need to change both of your numbers in the grid-column to achieve that result.

Hope that helps!

3

Last Two, Not First two. Word play is a beast. Your great. Thank You!

4

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