How to create grid-column so it consumes columns

HTML-CSS
1

i was asked to apply grid-column property to the class with item-5 so it consumes the last two columns. i hv tried what i could but it seems am nt getting it right. pls help

Your code so far


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

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


  /* 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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Safari/537.36.

Challenge: Use grid-column to Control Spacing

Link to the challenge:

2

Hello, the challenge asks you to:
Make the item with the class item5 consume the last two columns of the grid.
which means that the box should start at 2nd vertical line and consume the last two columns of the grid.

Solution:

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

thanks bro,…