I can't pass this section for some reason please help

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;
  /* add your code below this line */

grid-column: 1 / 3;

  /* add your 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; Lenovo P1ma40) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Mobile Safari/537.36.

Challenge: Use grid-column to Control Spacing

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/css-grid/use-grid-column-to-control-spacing

2

Hi @Ashu-spec.

In this problem, the requested change is for item5 to consume the last two columns in the grid. The code grid-column: 1 / 3; causes item5 to consume the first two columns, which incidentally pushes it down to the next row.

If you change the numbers in the code so that item5 consumes the last two columns (which start at 2), that should fix the problem.

Hope that helps!

2 Likes
3

K thanks for answering

1 Like
4

Or try do grid-column: span 2;
span 2 it will take 2 spaces on your grid.

1 Like