Please help on this topic grid-column

HTML-CSS
1

Tell us what’s happening:

  **Your code so far**


<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}`Preformatted text`
.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.190 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-spacinghis

2

Take a good look at the grid in the instructions. Pay particular attention to how the vertical lines are numbered. Which line numbers do you have to use to make item5 stretch over the last two columns?

3

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