Not able to get the result please guides

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;
  /* change the code below this line */

  grid-template-columns: repeat(3, 1fr);

  /* change the 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/79.0.3945.88 Safari/537.36.

Challenge: Limit Item Size Using the minmax Function

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/css-grid/limit-item-size-using-the-minmax-function

2

Just above the Run the Tests button is a summary of exactly what the tests for each lesson expect. In this case, it looks like:

Using the minmax function, replace the 1fr in the repeat function with a column size that has the minimum width of 90px and the maximum width of 1fr, and resize the preview panel to see the effect.

Does your code do that?

It’s pretty descriptive - in the line that goes grid-template-columns: repeat(3, 1fr); you are asked to replace the 1fr with a minmax(...), and they tell you specifically what values to use inside that.

3

Yes to add to snowmonkey’s point and to give you a hint you haven’t used the minmax function. You need to use the minmax function inside the repeat function.