Limit Item Size Using the minmax Function

HTML-CSS
1

Tell us what’s happening:
What is wrong here ?

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) minmax(90px, 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/66.0.3359.181 Safari/537.36.

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

4 Likes
2

Hey, when you are struck with any challenge, please read the aside description/brief and see what needs to be done to complete the challenge.

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.

And you can see the examples.

grid-template-columns: 100px minmax(50px, 200px);

And Read this small para.

In the code above, grid-template-columns is set to create two columns; the first is 100px wide, and the second has the minimum width of 50px and the maximum width of 200px.

Don’t click the solution, try it one more time.

Solution:

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

5 Likes
3

Thanks . I solved it by myself too .

4

i too solved it. here is the answer

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

3 Likes
5

The answer is:
grid-template-columns: repeat(3, minmax(90px, 1fr));

1 Like