---
id: 5a94fe6269fb03452672e462
title: Create Flexible Layouts Using auto-fit
challengeType: 0
videoUrl: ''
localeTitle: Criar layouts flexíveis usando o ajuste automático
---
## Description
auto-fit
funciona quase de forma idêntica ao auto-fill
. A única diferença é que, quando o tamanho do contêiner excede o tamanho de todos os itens combinados, o auto-fill
continua inserindo linhas ou colunas vazias e empurra seus itens para o lado, enquanto o auto-fit
recolhe essas linhas ou colunas vazias e estende seus itens para ajuste o tamanho do recipiente. Nota
Se o seu contêiner não conseguir encaixar todos os itens em uma linha, ele será transferido para um novo.
## Instructions
Na segunda grade, use o auto-fit
com repeat
para preencher a grade com colunas que tenham uma largura mínima de 60px
1fr
e máxima de 1 1fr
. Em seguida, redimensione a pré-visualização para ver a diferença.
## Tests
```yml
tests:
- text: container2
classe container2
deve ter uma propriedade grid-template-columns
com repeat
e auto-fit
que preencherá a grade com colunas com largura mínima de 60px
e máxima de 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
// solution required
```