CSS Grid - Create Flexible Layouts Using auto-fit

HTML-CSS
1

Tell us what’s happening:

I have solved the challenge as code below but still not pass, i do not know what’s wrong. I think it’s a bug

.container {
font-size: 40px;
min-height: 100px;
width: 100%;
background: LightGray;
display: grid;
/* Only change code below this line /
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
/ Only change code above this line */
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
}

// running tests

  1. container2 class should have a grid-template-columns

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;
    /* Only change code below this line */
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    /* Only change code above this line */
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 10px;
  }

  .container2 {
    font-size: 40px;
    min-height: 100px;
    width: 100%;
    background: Silver;
    display: grid;
    /* Only change code below this line */

    grid-template-columns: repeat(3, minmax(60px, 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>
<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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36

Challenge Information:

CSS Grid - Create Flexible Layouts Using auto-fit

2

you should not change the properties for .container, and you are not using auto-fit in .container2

reset the lesson, then you will need to use auto-fit (not auto-fill!) in the indicated place

1 Like