Plzz tell me what is the problm in this

HTML-CSS
1

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:  2/4;

  /* 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 (Linux; Android 5.1.1; SM-J200G Build/LMY47X) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.91 Mobile Safari/537.36.

Challenge: Use grid-column to Control Spacing

Link to the challenge:

2

Your code works perfectly fine for me.
It would be better if you could explain your problem a little more.

3

Hi @soumyaagarwala. Your code passes the tests in Chrome. Try using it as well.

4

It gives an error :

item5 class should have a
grid-column property which results in it consuming the last two columns of the grid.

5

But in this it gives an error :

item5 class should have a grid-column property which results in it consuming the last two columns of the grid.

6
  • Hey, your code passes for me. It seems like the problem might be your browser’s extensions that have access to the FCC site.
    Try disabling some extensions. If the problem still persists, you can try to use a different browser.
7

Yaa…it was my browser problem. Now it has executed successfully. Thank u soo much