CSS Grid: Create Flexible Layouts Using auto-fill: solution not working

In the first grid, use auto-fill with repeat to fill the grid with columns that have a minimum width of 60px and maximum of 1fr . Then resize the preview to see auto-fill in action
I do this:
grid-template-columns: repeat(autofill, minmax(60px, 1fr));
I get this error
// running tests
container class should have a grid-template-columns property with repeat and auto-fill that will fill the grid with columns that have a minimum width of 60px and maximum of 1fr
. // tests completed
This happens on ubuntu and windows, in firefox and edge. As far as I can tell there’s no reason this shouldn’t be working.

The solution was to change the code in the second container, the instructions were wrong

The instructions are correct, you have a typo there: repeat(autofill, minmax(60px, 1fr));, it’s auto-fill with a hyphen.
You got lucky though because if you only change the code in the second container and leave the first one untouched, the tests still pass, and you obviously didn’t repeat that typo the second time.

1 Like