grid-column: 1 / 3; didn't work

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: 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 NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.182 Safari/537.36.

Challenge: Use grid-column to Control Spacing

Link to the challenge:

Hello there.

Do you have a question?

If so, please edit your post to include it in the Tell us what’s happening section.

The more information you give us, the more likely we are to be able to help.

Hi @ArielLeslie ,

If you haven’t received my response via email. My problem is on se grid-column to Control Spacing . I put a property of grid-column with a value of 1 / 3 under item5 class. For some reason, It didn’t work. However, my friend who does the same, with the same value, worked!

Please advise. Thanks.

Hello @sitiocoder, read the requirements more carefully:

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

item5 needs to occupy the last two columns of the grid.
Are you sure your code accomplish that?

1 Like