Help with this challenge

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 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

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

2

Can you please explain more specifically ?

3

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.

4

I guess you have a problem with understanding of minmax().

When you switch to mobile to view your site, In simple words, you have to scale down your layout so that user don’t see the big text or images in the small mobile.

And if you have used CSS Grid in your layout, minmax() gives you an easy way to declare the size of the grids. So lets say when you use minmax(50px, 200px). If you are on the big screen the column or row for which you have used minmax() will grow to 200px and if you are viewing your site in mobile device then it will grow to 50px.

So basically when your viewport changes your row or column will change as defined in minmax() function.

Edit:

So what you need to do is change the default function.

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

now in this repeat(3, 1fr) part, You need to remove the 1fr and use minmax().
Try to understand what minmax() does and then solve it. Even after you can’t solve it reply this and i will post the answer.

6 Likes
5

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

1 Like
6

There you go… keep coding.

2 Likes
7

@pandaa880

i manage to get the answer just by reading your exlanation thanks a lot!

1 Like