When completing this challenge (Reduce Repetition Using the repeat Function) , be especially mindful when typing your code as adding a space between the word “repeat” and your open parenthesis “(” allows you to advance to the next challenge question, BUT it is not the correct code and does not produce the correct result (the grid should NOT change).
This code:
grid-template-columns: repeat (3, 1fr);
-versus-
grid-template-columns: repeat(3, 1fr);
Watching the “Get Help - Watch a Video” for this challenge helped me resolve the discrepancy in my code and produce the correct result. Thank you for providing supplemental videos that are short, to the point and provide key info to help you work through coding issues.
Thank you!
Stephanie
<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);
/* 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 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36.
Link to the challenge: