Stuck on grid-colum exercise

HTML-CSS
1

Tell us what’s happening:

Make the item with the class item5 consume the last two columns of the grid

Your code so far


<style>
.item1{background:LightSkyBlue;


}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;
  text-align: center; 

}
.item4{background:LightPink;}

.item5 {
  background: PaleGreen;
  /* Only change code below this line */
grid-column: 2 ;

  /* 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 (Windows NT 10.0; Win64; x64; rv:77.0) Gecko/20100101 Firefox/77.0.

Challenge: Use grid-column to Control Spacing

Link to the challenge:

2

Hi @tobijohnbello,

The task asks you to " Make the item with the class item5 consume the last two columns of the grid."

If image
“makes the item start at the first vertical line of the grid on the left and span to the 3rd line of the grid”, how would you " make the item with the class item5 consume the last two columns of the grid" ? :slight_smile:

Use this to see the logic:

image

Writing image
is not too far off, you just need to include where you want it to 'stop ':slight_smile: