Query about grid-column to control spacing

[mamtamukherjee1987]

Tell us what’s happening:
plz, can anybody help me with this? I didn’t understand how to use the grid-column property. How to use the last two columns of the grid.

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

Challenge: Use grid-column to Control Spacing

Link to the challenge:

freeCodeCamp.org

[KatyaBarta]

Hi
Before you try this challenge, make sur you understand what the “grid lines” are. If you have 3 columns, you will have 4 lines – the first one is just before the first column, the second one is just after the first column/before the second column, and so on.

So, you need to make the green rectangle cover the second and third columns. In order to do that, you have to figure it what the “starting line” and “ending line” are. Those are the two numbers you need.

Good luck! K

[padunk]

You also could search the topics first

Css grid: grid column to control spacing - HTML-CSS - The freeCodeCamp Forum