Função repeat(): Simplificando a criação de linhas e colunas

Aprenda a usar repeat() para criar múltiplas linhas ou colunas com o mesmo padrão.

Você já aprendeu a definir suas colunas e linhas usando grid-template-columns e grid-template-rows. Imagine que você precisa criar um grid com 12 colunas de largura igual, ou 5 linhas de 100px. Escrever 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; ou 100px 100px 100px 100px 100px; pode ser repetitivo e cansativo.

É aí que entra a função repeat(). Ela é aplicada nas propriedades grid-template-columns e grid-template-rows e permite que você crie um padrão repetitivo de colunas ou linhas de forma concisa e eficiente.

Pense na função repeat() como um "carimbo" ou "multiplicador" para suas trilhas de grid. Em vez de desenhar cada coluna ou linha individualmente, você diz: "Carimbe este padrão X vezes".

Como funciona a função repeat()

A função repeat() aceita dois argumentos:

  1. quantidade: O número de vezes que o padrão deve ser repetido. Pode ser um número inteiro positivo.
  2. tamanho_da_trilha: O tamanho da coluna ou linha que será repetida. Pode ser qualquer valor válido para o tamanho de uma trilha (px, %, fr, auto, min-content, max-content, minmax()).

Sintaxe:

.grid-container {
  grid-template-columns: repeat(quantidade, tamanho_da_trilha);
  grid-template-rows: repeat(quantidade, tamanho_da_trilha);
}

Exemplos de Uso:

  • grid-template-columns: repeat(3, 1fr);

    • Equivalente a: grid-template-columns: 1fr 1fr 1fr;
    • Cria 3 colunas de largura igual.

  • grid-template-rows: repeat(4, 100px);

    • Equivalente a: grid-template-rows: 100px 100px 100px 100px;
    • Cria 4 linhas de 100px de altura.

  • grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

    • Este é um uso muito poderoso para layouts responsivos!
    • auto-fill: O Grid cria o máximo de colunas (ou linhas) que couberem no contêiner.
    • minmax(200px, 1fr): Cada coluna terá no mínimo 200px e no máximo 1 fração do espaço disponível.
    • Isso cria um grid onde as colunas se ajustam automaticamente, mantendo um tamanho mínimo de 200px e preenchendo o espaço restante.

  • grid-template-columns: 100px repeat(2, 1fr) 50px;

    • Você pode combinar repeat() com definições de trilhas individuais.
    • Cria uma coluna de 100px, seguida por duas colunas de 1fr, e termina com uma coluna de 50px.

Vantagens da função repeat()

  • Concisão: Reduz drasticamente a quantidade de código CSS, especialmente para grids com muitas trilhas.
  • Legibilidade: Torna o código mais fácil de ler e entender a intenção do layout.
  • Responsividade Avançada: Combinada com auto-fill (ou auto-fit) e minmax(), permite criar layouts de grid que se adaptam de forma inteligente ao tamanho da tela, sem a necessidade de muitas media queries.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Função repeat() no CSS Grid</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: #f4f4f4;
    }

    .grid-container {
      display: grid;
      gap: 10px;
      background-color: #e0e0e0;
      border: 2px solid #333;
      padding: 10px;
      width: 90%;
      min-height: 200px; /* Altura mínima para visualização */
      margin: 0 auto 30px auto;
    }

    .grid-item {
      background-color: lightblue;
      border: 1px solid blue;
      padding: 15px;
      color: #333;
      font-weight: bold;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* --- Exemplos com repeat() --- */

    .container-repeat-fr {
      grid-template-columns: repeat(4, 1fr); /* 4 colunas iguais */
      grid-template-rows: repeat(2, 100px); /* 2 linhas de 100px */
    }

    .container-repeat-mixed {
      grid-template-columns: 100px repeat(2, 1fr) 50px; /* Coluna fixa, 2 flexíveis, coluna fixa */
      grid-template-rows: repeat(3, auto); /* 3 linhas auto-ajustáveis */
    }

    .container-repeat-auto-fill {
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Colunas que se ajustam */
      grid-template-rows: repeat(auto-fill, minmax(80px, auto)); /* Linhas que se ajustam */
    }
  </style>
</head>
<body>
  <h1>Função `repeat()` no CSS Grid</h1>

  <h2>`repeat(4, 1fr)` e `repeat(2, 100px)`</h2>
  <div class="grid-container container-repeat-fr">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
    <div class="grid-item">Item 5</div>
    <div class="grid-item">Item 6</div>
    <div class="grid-item">Item 7</div>
    <div class="grid-item">Item 8</div>
  </div>
  <p>Cria 4 colunas de largura igual e 2 linhas de 100px de altura.</p>

  <h2>Combinando `repeat()` com trilhas individuais</h2>
  <div class="grid-container container-repeat-mixed">
    <div class="grid-item">Fixo 100px</div>
    <div class="grid-item">1fr</div>
    <div class="grid-item">1fr</div>
    <div class="grid-item">Fixo 50px</div>
    <div class="grid-item">Fixo 100px</div>
    <div class="grid-item">1fr</div>
    <div class="grid-item">1fr</div>
    <div class="grid-item">Fixo 50px</div>
    <div class="grid-item">Fixo 100px</div>
    <div class="grid-item">1fr</div>
    <div class="grid-item">1fr</div>
    <div class="grid-item">Fixo 50px</div>
  </div>
  <p>Observe a sequência de colunas: 100px, 1fr, 1fr, 50px. As linhas se ajustam ao conteúdo.</p>

  <h2>`repeat(auto-fill, minmax(150px, 1fr))` para colunas responsivas</h2>
  <div class="grid-container container-repeat-auto-fill">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
    <div class="grid-item">Item 5</div>
    <div class="grid-item">Item 6</div>
    <div class="grid-item">Item 7</div>
    <div class="grid-item">Item 8</div>
    <div class="grid-item">Item 9</div>
    <div class="grid-item">Item 10</div>
  </div>
  <p>Redimensione a janela! As colunas se ajustam automaticamente, mantendo um mínimo de 150px e preenchendo o espaço.</p>
</body>
</html>

Resultado:

  • Você verá vários contêineres grid, demonstrando o uso da função repeat().
  • No último exemplo, redimensione a janela do navegador para ver como as colunas se ajustam automaticamente, adicionando ou removendo colunas conforme o espaço disponível, graças a auto-fill e minmax().

Boas Práticas:

  • Use repeat() para padrões: Sempre que você tiver várias colunas ou linhas com o mesmo tamanho ou padrão, use repeat() para simplificar seu código.
  • auto-fill vs. auto-fit:
    • auto-fill: Preenche o espaço com o máximo de trilhas possível, mesmo que algumas fiquem vazias.
    • auto-fit: É semelhante a auto-fill, mas se houver espaço extra e trilhas vazias, ele "estica" as trilhas existentes para preencher o espaço. Use auto-fit quando quiser que as trilhas existentes se expandam para ocupar o espaço extra, e auto-fill quando quiser manter o número de trilhas, mesmo que algumas fiquem vazias.
  • Combine com minmax(): A combinação repeat(auto-fill, minmax(min, max)) é um padrão de ouro para criar grids responsivos que se adaptam a qualquer tamanho de tela.

A função repeat() é uma ferramenta poderosa para criar grids de forma mais eficiente e para construir layouts responsivos complexos com menos código.