How do i fixContainer class should have a grid-template-columns property that is set to repeat 3 columns with the minimum width of 90px and maximum width of 1fr

please how do i fix this : container class should have a grid-template-columns property that is set to repeat 3 columns with the minimum width of 90px and maximum width of 1fr .

  **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: 90px minmax(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/99.0.4844.82 Safari/537.36

Challenge: Limit Item Size Using the minmax Function

Link to the challenge:

You need to use the repeat() function in your code.

Also take a closer look at the order of the values you have entered. You need to rearrange them so your minmax values reflect the minimum and maximum widths specified.

thanks. that was helpful

1 Like