---
id: 5a94fe5469fb03452672e461
title: Create Flexible Layouts Using auto-fill
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cmzdycW'
---
## Description
The repeat function comes with an option called auto-fill. This allows you to automatically insert as many rows or columns of your desired size as possible depending on the size of the container. You can create flexible layouts when combining auto-fill
with minmax
.
In the preview, grid-template-columns
is set to
repeat(auto-fill, minmax(60px, 1fr));
When the container changes size, this setup keeps inserting 60px columns and stretching them until it can insert another one.
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 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.
## Tests
```yml
tests:
- text: 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
.
testString: assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fill\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi), '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
.');
```
## Challenge Seed
## Solution
```js
var code = ".container {grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));}"
```