1. A Anatomia dos Gutters: Como o Bootstrap 5 Calcula as Lacunas

Diferente de grids flexíveis genéricos que utilizam gap simples, o sistema de grid do Bootstrap 5 implementa os gutters por meio de uma combinação refinada de padding horizontal nas colunas e margens negativas na linha (.row). Essa matemática interna garante que as extremidades esquerda e direita da primeira e da última coluna permaneçam perfeitamente alinhadas às bordas do .container pai.

A largura padrão de gutter do Bootstrap 5 é de 1.5rem (24px no total, distribuídos em 12px de padding à esquerda e 12px à direita de cada .col). Com os utilitários de gutter, você pode substituir esse valor padrão em tempo real sem escrever uma única linha de CSS customizado.

2. A Escala Numérica de Gutters (0 a 5)

Os utilitários de gutter operam sob a escala padronizada do Bootstrap 5, derivada da variável Sass $spacers:

• g-0: 0px — Remove todas as calhas; as colunas tocam-se perfeitamente.
• g-1: 0.25rem (4px) — Espaçamento compacto ideal para barras de ferramentas ou micro-badges.
• g-2: 0.5rem (8px) — Excelente para listagens densas de produtos em smartphones.
• g-3: 1rem (16px) — Espaçamento intermediário, equilibrado e fluido.
• g-4: 1.5rem (24px) — Espaçamento padrão de grande parte dos designs desktop.
• g-5: 3rem (48px) — Espaçamento amplo e arejado para vitrines, landing pages e portfólios visuais.

3. Controle Bidirecional: Dominando gx e gy

Em layouts responsivos reais, colunas que ficam lado a lado no monitor do computador frequentemente quebram e se empilham verticalmente na tela do celular. Quando isso acontece, o espaçamento horizontal original (gx) deixa de atuar entre elas, tornando o espaçamento vertical (gy) vital para evitar que os blocos fiquem colados uns sobre os outros.

Observe como a combinação row gx-3 gy-4 cria um equilíbrio estético refinado: 16px de distância entre colunas paralelas e 24px de respiro entre as linhas que quebram.

4. Código Prático: Laboratório Completo de Gutters

O exemplo abaixo demonstra as três aplicações fundamentais de gutters: a eliminação total de lacunas com g-0, o controle independente com gx-2 gy-4 e o comportamento responsivo adaptativo com g-2 g-md-4:

<!-- Exemplo 1: Gutters Zerados (g-0) para Galeria Seamless / Sem Bordas -->
<div class="container mb-5">
  <h5 class="text-secondary fw-semibold mb-3">1. Grade Sem Lacunas (<code>g-0</code>)</h5>
  <div class="row g-0 rounded-3 overflow-hidden shadow-sm">
    <div class="col-4 bg-primary text-white text-center py-4 fw-bold">
      Bloco A (g-0)
    </div>
    <div class="col-4 bg-success text-white text-center py-4 fw-bold">
      Bloco B (g-0)
    </div>
    <div class="col-4 bg-info text-dark text-center py-4 fw-bold">
      Bloco C (g-0)
    </div>
  </div>
</div>
 
<!-- Exemplo 2: Controle Específico por Eixo (gx-2 gy-4) -->
<div class="container mb-5">
  <h5 class="text-secondary fw-semibold mb-3">2. Calhas Diferenciadas (<code>gx-2 gy-4</code>)</h5>
  <div class="row gx-2 gy-4">
    <div class="col-6 col-md-3">
      <div class="p-3 border rounded-3 bg-light text-center h-100">
        <span class="badge bg-primary mb-2">Card 1</span>
        <p class="small text-muted mb-0">gx-2 (8px) | gy-4 (24px)</p>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="p-3 border rounded-3 bg-light text-center h-100">
        <span class="badge bg-primary mb-2">Card 2</span>
        <p class="small text-muted mb-0">gx-2 (8px) | gy-4 (24px)</p>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="p-3 border rounded-3 bg-light text-center h-100">
        <span class="badge bg-primary mb-2">Card 3</span>
        <p class="small text-muted mb-0">gx-2 (8px) | gy-4 (24px)</p>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="p-3 border rounded-3 bg-light text-center h-100">
        <span class="badge bg-primary mb-2">Card 4</span>
        <p class="small text-muted mb-0">gx-2 (8px) | gy-4 (24px)</p>
      </div>
    </div>
  </div>
</div>
 
<!-- Exemplo 3: Gutters Responsivos Dinâmicos (g-2 g-md-5) -->
<div class="container">
  <h5 class="text-secondary fw-semibold mb-3">3. Gutters Responsivos (<code>g-2 g-md-5</code>)</h5>
  <div class="row g-2 g-md-5">
    <div class="col-md-6">
      <div class="card shadow-sm border-0 bg-primary-subtle text-primary-emphasis p-4 rounded-4">
        <h6 class="fw-bold">Mobile: g-2 (8px)</h6>
        <p class="mb-0 small">Em telas pequenas, lacunas estreitas preservam a área útil do conteúdo.</p>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card shadow-sm border-0 bg-dark-subtle text-dark-emphasis p-4 rounded-4">
        <h6 class="fw-bold">Desktop: g-md-5 (48px)</h6>
        <p class="mb-0 small">Em telas largas, calhas amplas criam estética editorial e sofisticação.</p>
      </div>
    </div>
  </div>
</div>

5. Gutters Responsivos por Breakpoint

Assim como as colunas aceitam sufixos de tela (col-md-6), as classes de gutter aceitam modificadores responsivos completos:

<!-- Calhas compactas no celular (g-1), médias no tablet (g-md-3) e generosas no desktop (g-lg-5) -->
<div class="row g-1 g-md-3 g-lg-5">
  <div class="col-6 col-lg-3">...</div>
  <div class="col-6 col-lg-3">...</div>
  <div class="col-6 col-lg-3">...</div>
  <div class="col-6 col-lg-3">...</div>
</div>

Conclusão do Módulo 1

Parabéns! Com esta lição você conclui o Módulo 1: Fundamentos, Arquitetura & Grid System do Curso de Bootstrap 5 Profissional. Você agora domina a arquitetura moderna sem jQuery, a configuração via CDN/NPM, o funcionamento dos containers com breakpoints responsivos, a matriz de 12 colunas com Flexbox e o controle preciso de gutters horizontais e verticais.