Usin grid-column to control spacing

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-colum: 1/3;
  /* 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; U; Windows NT 5.2; en-US) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.108 Safari/537.36 UCBrowser/12.14.0.1221.

Challenge: Use grid-column to Control Spacing

Link to the challenge:

@Roberto First off, your CSS property grid-column has a typo in the spelling within the .container class. Also, this lesson is asking you to make .item5 span the last two columns of the 3x3 CSS grid created.

Use the diagram FCC provides in the lesson to look at which vertical column lines you would like .item5 to start and end at (ie span). Below is a small example of using grid-column to control spacing.

.item5 {
  grid-column: start column / end column;
}

Your not far from the solution so keep on trying :slightly_smiling_face:

Hi @Roberto, remember when counting with a grid you want to start with the line before or on top of the column or row you want start with . Additionally, you’ll want to end with the line before or above the column or row following the one you want to end with.

Examples.

If you want to start at column 1 and span 2 columns you would write grid-column: 1 / 3 or grid-column: 1 / span 2.

You can think of grid-column: 1 / 3 as starting before column 1 and ending before column 4. With that being said, I like to use span because it’s less likely that I will mess up the count.

… if you want to start at column 1 and span/or fill 3 columns you would write ‘grid-column: 1/4’.

Hopefully this makes sense. I wanted to try to explain it without giving you the solution.