Grade de doze colunas: quando dividir a linha e quando deixar o texto correr

A página de produto da Loja Trilha tinha onze blocos e nove números de coluna diferentes: col-md-5 ao lado de col-md-7, depois col-md-4, col-md-3, um col-md-2 solitário. Ninguém sabia por quê. No notebook, nada alinhava com nada; no celular, a descrição do produto virou três colunas de quatro palavras cada.

A resposta curta: a grade de doze colunas serve para quando dois ou mais blocos dividem a mesma linha de verdade — e doze foi escolhido porque se divide em metades, terços, quartos e sextos. Se um bloco é texto corrido, ele não precisa de coluna, precisa de largura máxima. E no celular, quase tudo volta a ser uma coluna só.

Por que doze, e por que vira bagunça

Doze tem muitos divisores: 1, 2, 3, 4, 6 e 12. Com ele você monta duas metades (6 + 6), três terços (4 + 4 + 4), quatro quartos (3 + 3 + 3 + 3) ou uma divisão principal e lateral (8 + 4). Essas proporções se repetem pela página e criam o que o leitor percebe como ordem: bordas que alinham de uma seção para a outra.

A bagunça aparece quando cada bloco ganha um número inventado na hora. Um 5 + 7 aqui, um 3 + 9 ali, e as bordas internas nunca coincidem. O leitor não vê a grade, mas vê que nada se alinha. O segundo problema é usar a grade como ferramenta de espaçamento: colocar um col-md-8 com offset-md-2 só para estreitar um parágrafo. Funciona, mas é uma divisão de linha fingindo ser largura de leitura.

Se você usa um construtor visual, a tentação é maior, porque arrastar blocos gera coluna para tudo. Há um post vizinho sobre isso em construtor de Bootstrap gera a casca, não a página.

Como decidir o layout antes de escrever classe

1. Liste os blocos da página e marque quais realmente ficam lado a lado no desktop. Na Loja Trilha: galeria e informações de compra; três cartões de benefício; quatro produtos relacionados.
2. Escolha poucas proporções e repita. Exemplo: 7 + 5 para galeria e compra, 4 + 4 + 4 para benefícios, 3 + 3 + 3 + 3 para relacionados.
3. Defina o comportamento por largura. Celular: tudo empilhado. Tablet: relacionados em 2 + 2. Desktop: o layout completo.
4. Tire da grade o que é texto corrido. Descrição, avaliações e perguntas ficam numa coluna única com largura máxima de leitura.
5. Defina o espaçamento entre colunas (gutter) uma vez, para a página inteira.
6. Teste em três larguras reais: celular estreito, tablet em pé e notebook.

Exemplo com Bootstrap 5

Nos breakpoints padrão do Bootstrap 5, md começa em 768 px e lg em 992 px. Sem sufixo, a classe vale para todas as larguras; com sufixo, vale daquela largura para cima.

<div class="container">
  <div class="row g-4">
    <div class="col-12 col-lg-7">
      <!-- galeria de fotos -->
    </div>
    <div class="col-12 col-lg-5">
      <!-- preço, frete, botão de compra -->
    </div>
  </div>

  <div class="row row-cols-1 row-cols-md-3 g-4 mt-2">
    <div class="col">Troca grátis em 30 dias</div>
    <div class="col">Envio em 24 h</div>
    <div class="col">Garantia de 1 ano</div>
  </div>

  <article class="descricao mt-5">
    <h2>Sobre a mochila</h2>
    <p>Texto corrido, sem coluna.</p>
  </article>

  <div class="row row-cols-2 row-cols-lg-4 g-3 mt-5">
    <div class="col">Produto A</div>
    <div class="col">Produto B</div>
    <div class="col">Produto C</div>
    <div class="col">Produto D</div>
  </div>
</div>

Três detalhes importam. Primeiro, row-cols-* resolve o caso "N cartões iguais" sem você escrever o número em cada filho. Segundo, g-4 na linha define o espaço entre colunas nos dois eixos, e esse espaço faz parte da conta: sem ele, os blocos encostam. Terceiro, a descrição não está numa row. Ela só recebe largura máxima no CSS:

.descricao {
  max-width: 70ch;
}

Com 70ch, a linha tem por volta de setenta caracteres, uma faixa confortável de leitura. Num monitor largo, o texto não se estica até virar uma linha de 200 caracteres que cansa o olho.

O mesmo layout em CSS Grid, sem framework

Se o projeto não usa Bootstrap, CSS Grid faz a grade de doze colunas em poucas linhas:

.produto {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

.produto > * {
  grid-column: 1 / -1;
}

@media (min-width: 992px) {
  .galeria { grid-column: span 7; }
  .compra  { grid-column: span 5; }
}

.relacionados {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

A regra grid-column: 1 / -1 faz todo filho ocupar a linha inteira por padrão, ou seja, no celular tudo empilha. Só a partir de 992 px a galeria e a compra dividem a linha. Nos relacionados, auto-fill com minmax nem pensa em doze: cabe quantos cartões de pelo menos 220 px a largura permitir. Para listas de itens iguais, isso costuma ser melhor que qualquer número fixo de colunas.

O celular volta a ser uma coluna

Numa tela de 360 px, três colunas de texto deixam cada uma com pouco mais de 100 px. Isso dá duas ou três palavras por linha, hifenização estranha e rolagem infinita. Empilhe. A exceção são itens pequenos e iguais, como miniaturas de produto, que funcionam bem em duas colunas mesmo no celular, como no row-cols-2 do exemplo.

Tabela é outro caso, e grade não resolve: o caminho é rolagem horizontal nomeada, explicado em tabela larga no celular. E para alinhar um elemento no centro sem chute de pixel, veja centralizar sem número mágico.

Grade dentro de grade

Aninhar uma row dentro de uma coluna é permitido e às vezes necessário, por exemplo para dividir o bloco de compra em preço e parcelamento lado a lado. O problema é aninhar por reflexo. Cada nível acrescenta margens negativas, gutters e um novo conjunto de doze, e logo ninguém sabe de onde vem aquele espaço extra. Antes de aninhar, pergunte se um display: flex com gap resolve o pedaço.

Erros comuns

• Inventar uma proporção por bloco. As bordas não se alinham entre seções e a página parece montada por partes.
• Colocar texto corrido em várias colunas no celular. Linhas de duas palavras e leitura sofrida.
• Usar coluna com offset para estreitar parágrafo. Funciona até alguém mexer na linha; max-width resolve sem efeito colateral.
• Esquecer o gutter. Os blocos encostam e bordas ou sombras se sobrepõem.
• Somar mais de doze na mesma linha sem querer. A última coluna desce para a linha de baixo e parece bug de CSS.
• Aninhar grade por padrão. Espaçamentos acumulados que ninguém consegue explicar.

Checklist

• Cada row da página tem blocos que realmente dividem a largura.
• A página usa no máximo três ou quatro proporções diferentes.
• No celular, texto corrido ocupa uma coluna só.
• Texto longo tem largura máxima de leitura, não coluna com offset.
• O gutter está definido uma vez e é o mesmo na página.
• Listas de itens iguais usam row-cols-* ou auto-fill.
• O layout foi conferido em celular, tablet e notebook reais.

Abra a página mais importante do seu site e conte: quantos blocos realmente dividem a largura com outro? Os que sobraram podem sair da grade hoje.