---
id: 5a94fe3669fb03452672e45f
title: Reduce Repetition Using the repeat Function
challengeType: 0
videoUrl: ''
localeTitle: Reduzir a repetição usando a função de repetição
---
## Description
Quando você usou grid-template-columns
e grid-template-rows
para definir a estrutura de uma grade, você inseriu um valor para cada linha ou coluna criada. Vamos dizer que você quer uma grade com 100 linhas da mesma altura. Não é muito prático inserir 100 valores individualmente. Felizmente, há uma maneira melhor - usando a função de repeat
para especificar o número de vezes que você deseja que sua coluna ou linha seja repetida, seguida por uma vírgula e o valor que você deseja repetir. Aqui está um exemplo que criaria a grade de 100 linhas, cada linha com 50 px de altura. grid-template-rows: repita (100, 50px);
Você também pode repetir vários valores com a função de repetição e inserir a função entre outros valores ao definir uma estrutura de grade. Aqui está o que eu quero dizer: grid-template-columns: repetição (2, 1fr 50px) 20px;
Isso se traduz em: grid-template-columns: 1fr 50px 1fr 50px 20px;
Nota
1fr 50px
é repetido duas vezes seguido por 20px.
## Instructions
Use repeat
para remover a repetição da propriedade grid-template-columns
.
## Tests
```yml
tests:
- text: container
classe container
deve ter uma propriedade grid-template-columns
definida para repetir 3 colunas com a largura de 1fr
.
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?1fr\s*?\)\s*?;[\s\S]*}/gi), "container
class should have a grid-template-columns
property that is set to repeat 3 columns with the width of 1fr
.");'
```
## Challenge Seed
## Solution
```js
// solution required
```