---
id: 5a94fe5469fb03452672e461
title: Create Flexible Layouts Using auto-fill
challengeType: 0
videoUrl: ''
localeTitle: Criar layouts flexíveis usando o preenchimento automático
---
## Description
A função de repetição vem com uma opção chamada preenchimento automático . Isso permite que você insira automaticamente quantas linhas ou colunas desejar, dependendo do tamanho do container. Você pode criar layouts flexíveis ao combinar o auto-fill
com minmax
. Na visualização, as grid-template-columns
são configuradas como repeat (preenchimento automático, minmax (60px, 1fr));
Quando o contêiner muda de tamanho, essa configuração continua inserindo colunas de 60px e esticando-as até que possa inserir outra. Nota
Se o seu contêiner não conseguir encaixar todos os itens em uma linha, ele será transferido para um novo.
## Instructions
Na primeira grade, use auto-fill
com repeat
para preencher a grade com colunas com largura mínima de 60px
1fr
e máxima de 1fr
. Em seguida, redimensione a visualização para ver a ação de preenchimento automático.
## Tests
```yml
tests:
- text: container
classe container
deve ter uma propriedade grid-template-columns
com repeat
e auto-fill
que preencherá a grade com colunas com largura mínima de 60px
1fr
e máxima de 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
// solution required
```