Can someone elaborate on what "consumed columns" means?

[SMR]

Tell us what’s happening:
I assumed the answer would be 1/5, but its 2/4. I’m not understanding what the task is asking for on this one.

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 / 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; rv:76.0) Gecko/20100101 Firefox/76.0.

Challenge: Use grid-column to Control Spacing

Link to the challenge:

freeCodeCamp.org

[Catalactics]

This is similar to the thread I answered with detail here:

Grid column to control spacing

Hello @kkjvasai, Let’s look back at the image the challenge provided [image] This shows how the grid columns and row works. So what you are doing is instructing the boxes to start from a certain grid and then end at another grid. Ex: element { /* Here I asked the element to stop stretching on grid 4 */ ↓ grid-column: 2/4; ↑ /* Here i asked the element to start stretching from grid 2 */ }

[SMR]

I’m still lost.

The grid stopped stretching at line 4, line 4 is the last line on the grid.
The grid started stretching at line 2, line 2 is NOT the first line on the grid.

Shouldn’t is start stretching from line 1 by default for any grid?

[Catalactics]

• Yes, but by using the CSS property grid-column, you can tell the element to specifically start and stop where.
• So by default they will start at 1 and end at 4, in this scenario. Then you added the grid-column property to with the value of 2/4. This is Forcing the element to start at 2 and end at 4.
• It’s like when you’re telling the text of an element to become blue or green, but the default is black, so if the color property is not defined, then it’s going to fallback to it’s default which is black.

[SMR]

Ok i think I get it now. So on a 3x3 grid if its set to 1/3 for example, the first 2 columns are consumed. If its set to 2/4, the last two columns are consumed.

Alternatively, on a 5x5 grid:
2/5 would consume 3 columns smack dab in the middle.
5/6 would consume the last column, correct?

[Catalactics]

Yup, you got it. Great Job figuring it out!!!

[SMR]

Thanks for your help!