Grid column help

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-column:3/5;
  /* 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/83.0.4103.116 Safari/537.36.

Challenge: Use grid-column to Control Spacing

Link to the challenge:

Hello @Rida1-bot,

Please state your Problem. What issue you are facing with?

Hello and welcome to the FCC community~!

image
Take a look at this graphic of the 3*3 grid. The grid-column property tells an element which column to start at, and which column to end at.

Currently, you are telling item5 to start at column 3 and end at column 5 - if you notice, there is no column 5 on a 3*3 grid. :slight_smile:

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

And I wrote…
grid-column:4/6;

As it has total 5 columns but it is not letting meh move on

:frowning:
this is not the actual item…

.item1{background:LightSkyBlue;} .item2{background:LightSalmon;} .item3{background:PaleTurquoise;} .item4{background:LightPink;} .item5 { background: PaleGreen; /* Only change code below this line */ grid-column:4/6; /* 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; }
1
2
3
4
5

this is actual code…

No. Your grid don’t have 5 columns.

Check the above code. It says your grid has 3 columns and 3 rows.

Now, the challenge says, set your 5th item in a grid so that it consumes the last two columns of the grid. The last two-column starts from line Number 2 and ends at line Number 4.

Ok Thanks :star_struck:

1 Like