---
id: 5a94fe5469fb03452672e461
title: Create Flexible Layouts Using auto-fill
challengeType: 0
videoUrl: ''
localeTitle: Crear diseños flexibles con autocompletar
---
## Description
La función de repetición viene con una opción llamada autocompletar . Esto le permite insertar automáticamente tantas filas o columnas del tamaño deseado como sea posible, dependiendo del tamaño del contenedor. Puede crear diseños flexibles al combinar auto-fill
con minmax
. En la vista previa, grid-template-columns
se establecen en repetir (autocompletar, minmax (60px, 1fr));
Cuando el contenedor cambia de tamaño, esta configuración continúa insertando columnas de 60 px y estirándolas hasta que pueda insertar otra. Nota
Si su contenedor no puede colocar todos sus artículos en una fila, los moverá a uno nuevo.
## Instructions
En la primera cuadrícula, use auto-fill
con repeat
para llenar la cuadrícula con columnas que tengan un ancho mínimo de 60px
y un máximo de 1fr
. Luego cambie el tamaño de la vista previa para ver la acción de autocompletar.
## Tests
```yml
tests:
- text: container
clase container
debe tener una propiedad de grid-template-columns
con repeat
y auto-fill
que llenará la cuadrícula con columnas que tengan un ancho mínimo de 60px
y un máximo 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
```