Why this not run

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.150 Safari/537.36.

Challenge: Use grid-column to Control Spacing

Link to the challenge:

Hi @Roshan120 !

Welcome to the forum!

It is not running because your output does not match the instructions.

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

Currently your output is this

But it should be this

Think carefully how you can modify your code so your result looks like mine.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.