Flexible Layouts Using auto-fill don't make the element fully stretch to 1fr

HTML-CSS
1

Tell us what’s happening:

In this example, after i placed the requested code from the lesson
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)) and I enlarged the window,
the specified elements don’t stretch to fill the container , assuming the max value of 1fr would make each occupy 1/5th of a the 1st row and not be bound to a finite pixel width.

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: 100px;
    width: 100%;
    background: LightGray;
    display: grid;
    /* change the code below this line */
    
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    
    /* change the code above this line */
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
  
  .container2 {
    font-size: 40px;
    min-height: 100px;
    width: 100%;
    background: Silver;
    display: grid;
    grid-template-columns: repeat(3, minmax(60px, 1fr));
    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>
<div class="container2">
  <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/68.0.3440.106 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill

2

It works in firefox, try resetting your code, clear the cache and run it

3

Resetting the cache doesn’t do anything different;
see the codepen I made here

I read that auto-fit does what I thought auto-fill would do to the 1st container with 1fr, but, instead auto-fill just adds other columns to the container which makes the 1fr measurement unit redundant for its max value. (Correct me if I’m wrong,please)
Setting it’s max value to 1fr should stretch the contents for of the 1st container until they would fill up the 1st row, in 5 equal parts,by my judgement.

4

Yep this is for auto-fit, whereas in auto-fill will separate the column into 5 equal parts but after separating into 5 equal parts the rest of the space is filled by empty columns.

But in auto-fit it doesn’t leave empty columns, rather it will expand/stretch the 5 columns to fill the entire row space, but both of them act identical upto some viewport width

If you are not on chrome, try it out, it should definitely work, mine works in both chrome and firefox

You can refer this,