Por que o grid de 12 colunas não deveria ser o padrão automático de todo layout

Um artigo publicado na CSS↳CSS31 conteúdosArquitetura CSS: CSS FuncionalDev (Back & Front) · set 2019Entendendo posicionamento com CSS de uma vez por todasDev (Back & Front) · jul 2025Sites que combinam estética e usabilidade: reflexos da evolução do CSSDev (Back & Front) · fev 2025Ver tudo em Dev (Back & Front) →-Tricks (link na matéria original) questiona um hábito que praticamente todo front-end carrega sem pensar: começar qualquer layout dividindo a página em 12 colunas. O texto não ataca o grid de 12 colunas em si, mas o piloto automático de recorrer a ele antes de entender o que o conteúdo e o negócio realmente precisam. Para quem só olha CSS Grid pelo lado técnico, vale entender de onde vem esse padrão e o que significa sair dele na prática.

De onde vem o 12 colunas

O histórico que o artigo traça ajuda a explicar por que esse número virou unanimidade. Em 1996, o livro Creating Killer Web Sites, de David Siegel, popularizou tabelas HTML e spacer GIFs como solução de layout, um gambiarra que ninguém projetou para isso mas que funcionou por falta de alternativa. Depois vieram float e posicionamento via CSS, também improvisados para essa função, com comportamento inconsistente entre navegadores.

O primeiro alívio de verdade veio com frameworks de grid prontos: o Blueprint CSS, em 2007, com 24 colunas, e o 960 Grid System de Nathan Smith, em 2008, com opções de 12 e 16 colunas. Bootstrap e Foundation consolidaram depois o 12 colunas como convenção, porque o número se divide limpo em metades, terços e quartos, exatamente os layouts de 2, 3 e 4 colunas que aparecem em qualquer site. CSS Grid chegou e resolveu o problema técnico de layout, mas o hábito editorial ficou: muita gente ainda começa dividindo a página em 12 e só depois encaixa o conteúdo.

O problema não é o grid, é a pergunta que falta

O argumento central do artigo é que a pergunta certa não é "quantas colunas", e sim o que diferencia a empresa e o que a página precisa comunicar antes de qualquer decisão de grid. Para ilustrar, o texto usa um estudo de caso fictício, a Wheelman, uma marca inventada que vende produtos e serviços para motoristas de fuga (seguro de assalto, consultoria jurídica, loja de equipamentos). É brincadeira, mas o problema de design é real: como fazer uma página de produto que pareça da Wheelman e não um template genérico de e-commerce↳E-commerce21 conteúdosECBR Club: novo espaço para devs se conectarem ao ecossistema de e-commerceDev (Back & Front) · mai 2025TOTVS anuncia joint venture com VTEXMarketing Tech · mai 2019Jovens da Brasilândia recebem formação gratuita em tecnologiaGestão Dev & TI · jul 2025Ver tudo em Marketing Tech →.

A solução proposta troca colunas por módulos: uma grade de 4 colunas por 4 linhas (16 módulos), onde cada elemento ocupa um ou mais módulos conforme sua importância. Isso dá controle de hierarquia visual sem depender só da largura da coluna. Em CSS Grid isso é direto de implementar:

.product-layout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 1rem;
}

.product-layout__headline {
  grid-column: span 4;
}

.product-layout__hero-image {
  grid-column: span 2;
  grid-row: span 3;
}

.product-layout__buy-box {
  grid-column: span 2;
}

O resultado é uma composição com peso desigual entre os elementos, algo que um grid de colunas puro não entrega sem recorrer a classes especiais de largura.

Grids compostos: misturar para não repetir o template

O segundo recurso que o artigo descreve é o grid composto: sobrepor duas grades diferentes (por exemplo, uma de 2 colunas e outra de 3) para gerar linhas de divisão novas. Uma grade de 2 colunas (50%/50%) sobreposta a uma de 3 (33,3% cada) cria, nos pontos onde as linhas coincidem, quatro colunas de larguras distintas: duas largas nas pontas e duas estreitas no meio. Em CSS isso vira uma única declaração de grid-template-columns com proporções específicas em vez de frações iguais:

.compound-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr;
  gap: 1rem;
}

O ganho é variedade entre páginas da mesma marca sem perder uma estrutura comum. A revista, a loja e os serviços da Wheelman podem usar combinações diferentes do mesmo conjunto de linhas, e ainda assim parecer parte do mesmo site.

Onde o subgrid entra

O artigo não fala de subgrid porque é um texto de design, não de implementação, mas é exatamente a peça que falta para fazer grid composto funcionar de forma consistente entre seções com HTML diferente. Sem subgrid, cada seção com seu próprio display: grid tem linhas independentes, e alinhar visualmente duas grades sobrepostas vira acerto manual de fr e gap. Com subgrid, uma seção filha herda as linhas do grid pai:

.section {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

Isso garante que, mesmo trocando o conteúdo de cada bloco, as bordas continuam batendo com o grid composto definido lá em cima. Na prática, isso torna subgrid uma técnica viável para quem já pode adotá-la hoje, e não só um exercício teórico de design.

O que muda pra quem implementa

Grid modular e grid composto resolvem um problema de identidade visual, mas trazem custo técnico que o artigo não aborda e que cabe a quem desenvolve calcular:

• Responsividade↳Design responsivo4 conteúdosDicas de Front-End para usabilidade, acessibilidade, performance e responsividadeProduto & UX · fev 2025Tipos de layouts e suas diferençasProduto & UX · jan 2025Dica de ouro: Saiba como fazer uma navbar responsivaDev (Back & Front) · jun 2025Ver tudo em Produto & UX → fica mais trabalhosa. Um grid de 12 colunas tem regras de breakpoint conhecidas e testadas; um grid de 16 módulos com spans variados precisa de grid-template-areas redefinidas por breakpoint, uma por uma.
• Ordem de leitura e acessibilidade exigem atenção redobrada. Posicionar elementos livremente com grid-column/grid-row não muda a ordem do DOM. Se a ordem visual se afastar da ordem de leitura, usuário de leitor de tela navega em sequência diferente da que aparece na tela. Vale testar a navegação por teclado e por VoiceOver/NVDA sempre que o layout visual se desviar do HTML.
• Manutenção de design system fica mais cara. Um grid de 12 colunas permite reuso de componentes entre páginas; grids compostos por seção tendem a gerar CSS específico por contexto, o que pesa em projetos com pouca gente de front e muita pressão de prazo.

Em resumo: o ganho de personalidade visual tem contrapartida direta em complexidade de manutenção e teste de acessibilidade, e isso precisa entrar na conversa com quem decide prazo e escopo do projeto.

Quando o 12 colunas ainda é a escolha certa

O artigo original não descarta o grid de 12 colunas: reconhece que ele continua útil e não sugere abandoná-lo por completo. O ponto levantado é outro: recorrer a ele automaticamente, sem pensar no que o conteúdo pede, deixa pouco espaço para o caráter e a personalidade que tornam um site memorável.

Na prática, isso sugere que o grid de 12 colunas continua fazendo sentido quando previsibilidade importa mais que expressão visual, ou quando trocar a base de um layout já consolidado custa mais caro do que o ganho de personalidade traria. A decisão, de qualquer forma, deveria vir de uma escolha consciente, não do hábito.

O livro que originou o artigo, Standout Designs for the Web, trata esses conceitos de grid, cor e tipografia com mais profundidade e será lançado em 20 de novembro, por US$ 14,99 nas edições em EPUB e PDF sem DRM, com pré-venda já aberta na loja da CSS-Tricks. Para quem trabalha lado a lado com design, o ponto prático do artigo é simples: perguntar ao designer por que o grid tem aquele número de colunas é uma pergunta tão válida quanto perguntar por que o endpoint tem aquele formato de resposta.

Fonte: CSS-Tricks