Use grid column to control space

HTML-CSS
1

Tell us what’s happening:
i am having issue writing correct code but not accepted by browser tried out different browsers as well please check and let me know ?

issue
issue1361×578 54.6 KB

Your code so far

   <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>   

<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>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36.

Challenge: Use grid-column to Control Spacing

Link to the challenge:

2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

3

please ans my problem :frowning: ?

4

Your task is to make item 5 span the last two columns of the grid.

It looks like you copied the FCC example, which starts at the first vertical line of the grid on the left and span to the 3rd line of the grid.

Have it start at 2 instead of 1 and it needs to span the last two columns of the grid.

grid-column: 2/? /*what number makes sense to go here*/

make sense?

5

4
and it’s work thanks alot :slight_smile: :smiling_face_with_three_hearts:

1 Like
6