⚡ Curso de CSS • Web-ZoneWare

Espaçamento com gap no Grid e Flexbox | Web Academy

Lição 34 de 50

Espaçamento com gap no Grid e Flexbox | Web Academy

Durante duas décadas, colocar um simples espaço vazio entre dois botões ou entre três cartões de uma galeria foi uma das tarefas mais frustrantes do desenvolvimento web. Como a propriedade margin é aplicada a todas as instâncias de um elemento, a margem do último filho empurrava a borda externa do contêiner para fora, exigindo “gambiarras” como :last-child { margin-right: 0 } ou margens negativas tenebrosas no contêiner pai (margin: -10px). Essa era de sofrimento acabou com a padronização da propriedade universal gap no CSS Grid e no Flexbox.

1. A História e a Unificação do gap

Originalmente, a propriedade foi criada sob os nomes grid-gap, grid-row-gap e grid-column-gap, funcionando com exclusividade dentro de contêineres com display: grid.

Ao perceber a elegância e a precisão dessa solução, o comitê da W3C (através do módulo CSS Box Alignment Level 3) tomou uma decisão histórica:

  1. Removeu o prefixo restritivo grid-, rebatizando as propriedades para gap, row-gap e column-gap.
  2. Estendeu o suporte dessas propriedades para o CSS Flexbox e até para colunas de texto com column-count!

Compatibilidade Total: Hoje, 100% dos navegadores modernos (Chrome, Firefox, Safari, Edge, Opera) suportam a propriedade gap sem prefixo tanto no Grid quanto no Flexbox. Você não precisa mais de nenhum hack de margem negativa!

2. Sintaxe e Valores do gap

A propriedade abreviada gap aceita um ou dois valores para definir o espaçamento vertical e horizontal:

CSS3 15 linhas 
/* Sintaxe: gap: [row-gap] [column-gap]; */
.conteiner {
  gap: 24px 16px; /* 24px entre linhas, 16px entre colunas */
}
 
/* Valor Único: aplica a mesma distância em ambas as direções */
.conteiner-quadrado {
  gap: 20px; /* 20px entre linhas E colunas */
}
 
/* Propriedades Longas e Independentes */
.conteiner-detalhado {
  row-gap: 32px;    /* Espaço vertical entre linhas */
  column-gap: 12px; /* Espaço horizontal entre colunas */
}

3. Como o gap Opera no CSS Grid

No CSS Grid, o gap atua diretamente sobre as canaletas (gutters) que separam as Grid Lines:

  • Ele adiciona respiro exclusivamente entre as faixas internas da grade.
  • Ele nunca adiciona espaço nas bordas externas do contêiner (entre a borda do pai e a primeira/última linha). O espaço externo continua sendo controlado por padding no pai.
  • O motor do Grid deduz o tamanho total somado de todos os gaps antes de computar as frações fr, garantindo que o layout nunca transborde a tela.
  • Quando usamos repeat(auto-fit, minmax(...)), qualquer coluna vazia que colapsar para 0px tem seu gap correspondente também colapsado a zero automaticamente!

4. Como o gap Opera no CSS Flexbox

No Flexbox, o gap é a solução definitiva para o alinhamento de listas e botões:

  • Em um contêiner com flex-direction: row, o gap atua horizontalmente apenas entre os irmãos adjacentes. O último item encosta perfeitamente na borda direita sem sobras.
  • Em um contêiner com flex-direction: column, o gap atua verticalmente apenas entre os itens empilhados.
  • Quando você ativa a quebra de linha com flex-wrap: wrap, o row-gap controla com precisão a distância entre as linhas que caem, eliminando a necessidade de seletores condicionais complexos.

Onde o gap NÃO Funciona: A propriedade gap só é reconhecida pelo navegador em elementos com contexto de formatação estruturado: display: grid, display: inline-grid, display: flex e display: inline-flex. Aplicar gap em caixas normais com display: block ou inline-block não produzirá absolutamente nenhum efeito!

5. Matriz Comparativa: gap no Grid vs. gap no Flexbox

Aspecto Comportamento no CSS Grid Comportamento no Flexbox
Natureza do Vão Canaleta bidimensional rígida entre linhas de grade. Respiro unidimensional dinâmico entre itens vizinhos.
Tratamento do Espaço Descontado antes do cálculo das frações fr. Consumido como espaço não flexível no eixo ativo.
Quebra de Linhas Controlado nativamente pela definição de linhas e colunas. row-gap atua entre as linhas criadas por flex-wrap.
Bordas Externas Zero espaço nas extremidades externas. Zero espaço antes do 1º item e após o último.

6. Laboratório Prático: Comparando gap no Flexbox e no Grid

No exemplo abaixo, observe como o gap resolve com pouquíssimas linhas dois desafios comuns: um formulário de cadastro em Flexbox e uma grade de métricas em CSS Grid com espaçamento assimétrico:

HTML5 99 linhas 
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Laboratório de Espaçamento com gap</title>
  <style>
    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: #0b0f19;
      color: #f8fafc;
      padding: 30px;
      margin: 0;
    }
 
    /* 1. FLEXBOX COM GAP (Barra de Ações e Formulário) */
    .barra-acoes-flex {
      display: flex;
      flex-wrap: wrap;
      gap: 12px; /* 12px entre os botões sem vazar nas pontas */
      background: #1e293b;
      padding: 16px;
      border-radius: 10px;
      border: 1px solid #334155;
      margin-bottom: 30px;
    }
 
    .btn-acao {
      background: #334155;
      color: #fff;
      border: none;
      padding: 10px 18px;
      border-radius: 6px;
      font-weight: 600;
      cursor: pointer;
    }
 
    .btn-destaque {
      background: #2563eb;
    }
 
    /* 2. CSS GRID COM GAP ASSIMÉTRICO (row-gap diferente de column-gap) */
    .grade-metricas-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 28px 16px; /* 28px vertical (row-gap) e 16px horizontal (column-gap) */
    }
 
    .card-metrica {
      background: #111827;
      border: 1px solid #1f2937;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
 
    .card-metrica h4 {
      margin: 0;
      font-size: 0.85rem;
      color: #94a3b8;
    }
 
    .card-metrica .numero {
      font-size: 1.8rem;
      font-weight: 800;
      color: #38bdf8;
      margin-top: 6px;
    }
  </style>
</head>
<body>
  <h3 style="color:#e2e8f0; margin-top:0;">1. Barra de Ações com Flexbox (<code>gap: 12px</code>)</h3>
  <div class="barra-acoes-flex">
    <button class="btn-acao btn-destaque">+ Novo Projeto</button>
    <button class="btn-acao">Filtrar</button>
    <button class="btn-acao">Exportar PDF</button>
    <button class="btn-acao">Configurações</button>
  </div>
 
  <h3 style="color:#e2e8f0;">2. Grade com CSS Grid e Gap Assimétrico (<code>gap: 28px 16px</code>)</h3>
  <div class="grade-metricas-grid">
    <div class="card-metrica">
      <h4>Consultas API</h4>
      <div class="numero">1.42M</div>
    </div>
    <div class="card-metrica">
      <h4>Tempo Médio</h4>
      <div class="numero">42ms</div>
    </div>
    <div class="card-metrica">
      <h4>Erros HTTP</h4>
      <div class="numero" style="color:#10b981;">0.00%</div>
    </div>
    <div class="card-metrica">
      <h4>Uptime</h4>
      <div class="numero">99.98%</div>
    </div>
  </div>
</body>
</html>

Abra este laboratório no Playground IDE e teste alterar os valores do gap para observar a separação fluida e higiênica sem alteração das margens externas:

⚡ Abrir no Playground IDE →

7. Resumo e Próximos Passos

  • A propriedade gap unificou o espaçamento entre elementos no CSS Grid e no Flexbox, eliminando hacks de margem negativa.
  • A sintaxe gap: [row-gap] [column-gap] permite definir espaçamentos verticais e horizontais independentes.
  • O gap nunca vaza para fora das extremidades externas do contêiner, atuando exclusivamente entre os itens irmãos.
  • No CSS Grid, o gap é subtraído matematicamente pelo navegador antes do cálculo de frações fr.
  • No Flexbox, o gap funciona em linha única e também entre linhas quebradas por flex-wrap.

Próximo Passo: Imagine poder desenhar o mapa visual da sua página inteira em texto puro no CSS, escrevendo palavras como "header header" e "sidebar main"? Na Lição 35, conheceremos a técnica mais elegante de arquitetura web: Áreas Nomeadas com grid-template-areas!

Rolar para cima