repeat, minmax e auto-fit no CSS Grid | Web Academy

Web-Zoneware — Thu, 22 Oct 2026 02:42:17 +0000

Durante anos, tornar uma galeria de produtos responsiva exigia um trabalho braçal exaustivo: você precisava escrever um bloco com 4 colunas para monitores grandes, adicionar um @media (max-width: 1200px) para 3 colunas, outro @media (max-width: 768px) para 2 colunas e mais um @media (max-width: 480px) para empilhar em 1 coluna no celular. O CSS Grid moderno eliminou completamente essa redundância com a criação da Grade Mágica Responsiva: a fusão das funções repeat(), minmax() e as palavras-chave auto-fit e auto-fill.

1. A Função `repeat()`: Exterminando a Repetição de Código

Se você precisar criar uma grade com 12 colunas iguais para o sistema de design da sua aplicação, digitar 1fr doze vezes seguidas é tedioso e propenso a erros. A função repeat() compacta essa declaração:

CSS3 5 linhas

/* Em vez de: grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; */
.sistema-12-colunas {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

/* Em vez de: grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; */
.sistema-12-colunas {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

Padrões e Misturas com `repeat()`

A função aceita padrões rítmicos e pode ser intercalada com faixas estáticas:

CSS3 9 linhas

/* Cria: 1fr 2fr 1fr 2fr 1fr 2fr */
.padrao-ritmico {
  grid-template-columns: repeat(3, 1fr 2fr);
}
 
/* Sidebar de 260px + 4 colunas de 1fr + barra lateral de 60px */
.layout-misto {
  grid-template-columns: 260px repeat(4, 1fr) 60px;
}

/* Cria: 1fr 2fr 1fr 2fr 1fr 2fr */
.padrao-ritmico {
  grid-template-columns: repeat(3, 1fr 2fr);
}

/* Sidebar de 260px + 4 colunas de 1fr + barra lateral de 60px */
.layout-misto {
  grid-template-columns: 260px repeat(4, 1fr) 60px;
}

2. A Função `minmax()`: A Faixa com Piso e Teto

A função minmax(mínimo, máximo) define uma faixa de tamanho flexível para uma coluna ou linha. Ela estabelece uma fronteira de segurança: a coluna nunca será menor do que o valor mínimo e nunca será maior do que o valor máximo:

CSS3 4 linhas

.coluna-protegida {
  /* Largura mínima de 220px, mas pode esticar até 400px se sobrar espaço */
  grid-template-columns: minmax(220px, 400px) 1fr;
}

.coluna-protegida {
  /* Largura mínima de 220px, mas pode esticar até 400px se sobrar espaço */
  grid-template-columns: minmax(220px, 400px) 1fr;
}

A Regra de Ouro do minmax: O valor mínimo não pode ser uma unidade fr (como minmax(1fr, 300px), que é inválido perante a W3C). No entanto, o valor máximo PODE e DEVE ser 1fr! Declarar minmax(280px, 1fr) é a chave mágica da responsividade: a coluna terá no mínimo 280px; se houver espaço sobrando, ela se estica para preencher a tela.

3. O Santo Graal da Responsividade: A Grade Sem Media Queries

Quando combinamos repeat(), auto-fit e minmax(), acontece uma revolução arquitetural. Observe esta linha única de código CSS:

CSS3 5 linhas

.grade-magica-responsiva {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.grade-magica-responsiva {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

Como o Navegador Executa Essa Linha em Tempo Real?

Em um smartphone estreito (360px): O navegador percebe que só cabe uma única coluna de 280px (com as margens). Ele renderiza 1 coluna e estica-a até preencher 100% da tela.
Em um tablet (768px): O navegador calcula: 280px + 280px + 20px (gap) = 580px. Duas colunas cabem com folga! Ele renderiza 2 colunas e estica ambas via 1fr.
Em um monitor desktop (1280px): Cabem perfeitamente 4 colunas de 280px. O navegador renderiza 4 colunas uniformes.
Em uma TV 4K (2560px): Cabem 8 colunas sem que você precise escrever uma única linha adicional de código!

4. O Duelo Crucial: `auto-fit` vs. `auto-fill`

Tanto auto-fit quanto auto-fill calculam automaticamente quantas colunas de tamanho mínimo cabem no contêiner pai. No entanto, quando você tem poucos itens na grade (por exemplo, apenas 2 cartões em um monitor de 1920px), o comportamento deles diverge drasticamente:

1. `auto-fill` (Preenchimento com Faixas Fantasmas)

O navegador calcula quantas colunas cabem e cria todas as faixas vazias possíveis, mesmo que não haja conteúdo HTML para preenchê-las. Os 2 cartões existentes permanecem com seus 280px originais colados no canto esquerdo, e o resto da linha fica preenchido por colunas “fantasmas” invisíveis.

2. `auto-fit` (Adaptação com Colapso Total)

O navegador calcula as faixas possíveis, mas colapsa para zero pixels todas as faixas vazias que não têm itens dentro! Como resultado, os 2 cartões existentes se expandem através do 1fr e dividem 50% da largura total da tela cada um, criando um layout imersivo e sem buracos.

Propriedade	Comportamento com Poucos Itens	Visual na Tela Larga	Uso Mais Recomendado
`auto-fit`	Colapsa pistas vazias para `0px` e estica os itens existentes.	Itens ocupam 100% da largura disponível da linha.	Padrão absoluto para cartões, dashboards e catálogos.
`auto-fill`	Preserva as colunas vazias como espaços invisíveis reservados.	Itens mantêm tamanho mínimo; vãos vazios à direita.	Quando novos itens serão inseridos dinamicamente via JS.

5. Laboratório Prático: Grade Responsiva Mágica em Ação

No exemplo abaixo, observe a fórmula repeat(auto-fit, minmax(220px, 1fr)) operando em tempo real. Os cartões se rearranjam automaticamente conforme a largura da tela varia:

HTML5 92 linhas

 html>
 lang="pt-BR">

   charset="UTF-8">
  </span>Laboratório de CSS Grid Responsivo<span class="wzw-tk-tag">
  


   style="color:#38bdf8; margin:0;">Catálogo Auto-Responsivo com CSS Grid
   style="color:#94a3b8; font-size:0.9rem;">
    Redimensione a janela do navegador e observe as colunas mudando de 4 para 3, 2 e 1 automaticamente:
  
 
   class="galeria-cursos">
     class="card-curso">
       class="card-tag">Módulo 01
      HTML5 Semântico
      Estruturação moderna e acessibilidade na base da web.


 
     class="card-curso">
       class="card-tag">Módulo 02
      Fundamentos CSS
      Cascata, herança, especificidade e o Box Model.


 
     class="card-curso">
       class="card-tag">Módulo 03
      Flexbox 1D
      Alinhamentos cirúrgicos e a física dos eixos no CSS.


 
     class="card-curso">
       class="card-tag">Módulo 04
      CSS Grid 2D
      Arquiteturas bidimensionais fluidas sem media queries.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Laboratório de CSS Grid Responsivo</title>
  <style>
    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: #0b0f19;
      color: #f8fafc;
      padding: 30px;
      margin: 0;
    }

    /* A GRADE MÁGICA: Zero Media Queries! */
    .galeria-cursos {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 20px;
      margin-top: 24px;
    }

    .card-curso {
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 12px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      box-shadow: 0 4px 14px rgba(0,0,0,0.3);
      transition: transform 0.2s ease, border-color 0.2s ease;
    }

    .card-curso:hover {
      transform: translateY(-4px);
      border-color: #38bdf8;
    }

    .card-tag {
      font-size: 0.75rem;
      font-weight: 700;
      color: #38bdf8;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .card-curso h4 {
      margin: 0 0 10px 0;
      font-size: 1.1rem;
    }

    .card-curso p {
      margin: 0;
      font-size: 0.85rem;
      color: #94a3b8;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <h2 style="color:#38bdf8; margin:0;">Catálogo Auto-Responsivo com CSS Grid</h2>
  <p style="color:#94a3b8; font-size:0.9rem;">
    Redimensione a janela do navegador e observe as colunas mudando de 4 para 3, 2 e 1 automaticamente:
  </p>

  <div class="galeria-cursos">
    <div class="card-curso">
      <span class="card-tag">Módulo 01</span>
      <h4>HTML5 Semântico</h4>
      <p>Estruturação moderna e acessibilidade na base da web.</p>
    </div>

    <div class="card-curso">
      <span class="card-tag">Módulo 02</span>
      <h4>Fundamentos CSS</h4>
      <p>Cascata, herança, especificidade e o Box Model.</p>
    </div>

    <div class="card-curso">
      <span class="card-tag">Módulo 03</span>
      <h4>Flexbox 1D</h4>
      <p>Alinhamentos cirúrgicos e a física dos eixos no CSS.</p>
    </div>

    <div class="card-curso">
      <span class="card-tag">Módulo 04</span>
      <h4>CSS Grid 2D</h4>
      <p>Arquiteturas bidimensionais fluidas sem media queries.</p>
    </div>
  </div>
</body>
</html>

Abra este laboratório no Playground IDE e teste redimensionar o painel para comprovar a adaptação mágica do número de colunas sem nenhuma linha de media query:

⚡ Abrir no Playground IDE →

6. Resumo e Próximos Passos

repeat(n, faixa) compacta definições repetitivas de linhas e colunas.
minmax(min, max) estabelece limites de segurança rígidos e elásticos para qualquer faixa.
A fórmula repeat(auto-fit, minmax(280px, 1fr)) cria grades responsivas que calculam colunas automaticamente sem media queries.
auto-fit colapsa colunas vazias para 0px, esticando os itens existentes para preencher 100% da tela.
auto-fill preserva as colunas vazias fantasmas na linha quando há poucos itens.

Próximo Passo: Agora que você domina a geometria das pistas, como gerenciar os respiros entre linhas e colunas sem os erros do passado? Na Lição 34, desvendaremos o Espaçamento com gap no Grid e no Flexbox!

O post repeat, minmax e auto-fit no CSS Grid | Web Academy apareceu primeiro em Web-Zoneware.

Arquivos auto-fit - Web-Zoneware

repeat, minmax e auto-fit no CSS Grid | Web Academy

1. A Função repeat(): Exterminando a Repetição de Código

Padrões e Misturas com repeat()

2. A Função minmax(): A Faixa com Piso e Teto

3. O Santo Graal da Responsividade: A Grade Sem Media Queries

Como o Navegador Executa Essa Linha em Tempo Real?

4. O Duelo Crucial: auto-fit vs. auto-fill

1. auto-fill (Preenchimento com Faixas Fantasmas)

2. auto-fit (Adaptação com Colapso Total)

5. Laboratório Prático: Grade Responsiva Mágica em Ação

HTML5 Semântico

Fundamentos CSS

Flexbox 1D

CSS Grid 2D