---
id: 5a94fe6269fb03452672e462
title: Create Flexible Layouts Using auto-fit
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/c3dPph8'
---
## Description
auto-fit
works almost identically to auto-fill
. The only difference is that when the container's size exceeds the size of all the items combined, auto-fill
keeps inserting empty rows or columns and pushes your items to the side, while auto-fit
collapses those empty rows or columns and stretches your items to fit the size of the container.
Note
If your container can't fit all your items on one row, it will move them down to a new one.
## Instructions
In the second grid, use auto-fit
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 the difference.
## Tests
```yml
tests:
- text: container2
class should have a grid-template-columns
property with repeat
and auto-fit
that will fill the grid with columns that have a minimum width of 60px
and maximum of 1fr
.
testString: assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fit\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi), 'container2
class should have a grid-template-columns
property with repeat
and auto-fit
that will fill the grid with columns that have a minimum width of 60px
and maximum of 1fr
.');
```
## Challenge Seed
## Solution
```js
var code = ".container {grid-template-columns: repeat( auto-fill, minmax(60px, 1fr));} .container2 {grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));}"
```