Https://www.freecodecamp.org/learn/responsive-web-design/css-grid/use-grid-column-to-control-spacing

HTML-CSS
#1

Tell us what’s happening:
Trying to set ’ Make the item with the class item5 consume the last two columns of the grid.’ Not sure why its not working :frowning:

Your code so far
grid-column: 5 / 5


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

.item5 {
  background: PaleGreen;
  /* add your code below this line */

grid-column: 5 / 5;
  /* add your 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; WOW64; rv:60.0) Gecko/20100101 Firefox/60.0.

Challenge: Use grid-column to Control Spacing

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/css-grid/use-grid-column-to-control-spacing

#2

grid-column: span 2;

If you ‘span 2’ item5 it will take two space(rows). If you need more help with the grid system I will try to help you.

#3

Hi @sreejithu, welcome to the forums.
Look at the lesson again and notice that the sample in the lesson is just like the code you’re asked to edit. There is only 4 columns. The box that you’re asked to span starts at what column and where do you want it to end?

#4

@Claudiu, it’s good that you were able to solve the challenge but we try and help and guide people to a solution without giving full blown answers.

Also, while your answer will pass the tests the response you gave hasn’t been introduced yet. The instructions show the users another way to solve this lesson.

1 Like
#5

Thank you for advice @Roma, i didn’t know.

@sreejithu let’s follow the exercise.

We have a .container which display the items grid.
We define our container with 3 columns (each column take 1fr(fraction) of space).
If we have 3 columns/rows we will have 4 lines in total.
ex. 3 columns = 4 lines; 10 columns = 11 lines.
We have already on the first row 3 columns: item1, item2, item3.
item1 it starts from line 1 and it ends to line 2
item2 it starts from line 2 and it ends to line 3
item3 starts from line 3 and it ends to line 4

notice the line 4 it’s the end of our last column

if we want one of the column to take more spaces we can define link this:
we want the item 2 to take 2 spaces at the end in the grid: we will define like this:

item2 {
grid-column: 2 (it will start from line to) / 4 (it will end to line 4);
}

#6

Thank you for the very extensive explanation.

#7