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:

/* 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:

/* 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:

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

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:

.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.

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:

<!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.