Nas lições anteriores, temos trabalhado com a propriedade grid-template-columns e definido o valor para algumas unidades fracionárias.

<link rel="stylesheet" href="styles.css">
<div class="grid-container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 10px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: darkblue;
}

Embora o código a seguir seja completamente válido, existe uma maneira mais fácil de repetir uma seção ou toda a sua lista de faixas. A função repeat() é usada para repetir uma seção ou todas as faixas para colunas ou linhas. Esta função recebe uma contagem de repetições e as faixas que você deseja repetir. Aqui está uma versão revisada do exemplo anterior usando a função repeat:

<link rel="stylesheet" href="styles.css">
<div class="grid-container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 10px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: darkblue;
}

Não haverá mudança nos estilos no navegador, mas esta é uma forma mais concisa de escrever valores repetidos para as colunas. A função repeat() aceitará qualquer padrão válido que você possa usar para linhas ou colunas. Aqui está um exemplo usando a função repeat() para definir a primeira e a terceira colunas com 20 pixels e a segunda e a quarta colunas com uma unidade fracionária.

<link rel="stylesheet" href="styles.css">
<div class="grid-container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 20px 1fr);
  column-gap: 10px;
}

.grid-container div {
  height: 100px;
  background-color: darkblue;
}

Às vezes, você pode optar por escrever cada valor individualmente em vez de usar a função repeat(). Mas há momentos em que essa função é útil, especialmente quando você quer repetir um padrão específico para uma lista de faixas.