Please i your help i am stacked with(container class should have a grid-template-columns property that is set to repeat 3 columns with the width of 1fr.)

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

.container {
  font-size: 40px;
  min-height: 300px;
  width: 100%;
  background: LightGray;
  display: grid;
  /* Only change code below this line */
grid-template-columns: repeat(3,1fr 50px)20px;


  /* Only change code above this line */
  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 6.3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36.

Challenge: Reduce Repetition Using the repeat Function

Link to the challenge:

2

The lesson just ask to replace this:

grid-template-columns: 1fr 1fr 1fr;

now using repeat, so you will have to code it so repeat 3 times 1fr, in the code you share looks like it repeats 3 times 1fr and then 50px, and then adds another colum with 20px. So you are ending with 7 columns. You need to erase 50px from the repeat parenthesis (Because you dont need columns of 50px) and then remove the last 20px, because you are not asked another column of 20px.

3

I am so grateful…thanks

4

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