Dominar CSS Grid com Claude Code

Defina primeiro o limite do problema

Dominar CSS Grid com Claude Code não é pedir ao Claude Code uma UI bonita e solta. O objetivo é melhorar interação, layout, acessibilidade, mobile e conversão na mesma checklist. Em produção, textos longos, blocos de código, anúncios, CTA, teclado, erros e estados vazios importam.

Leia também claude code responsive design, claude code css styling, claude code design system. Referências oficiais: MDN CSS Grid Layout, MDN grid-template-areas, MDN minmax. O pedido precisa conter objetivo, escopo proibido, regras visuais, use case e pitfall.

Organize os pré-requisitos antes de pedir ao Claude Code

As falhas com Grid não vêm tanto da falta de conhecimento das propriedades CSS, mas de implementar sem deixar claro “o que é fixo e o que é elástico”. Passe estas condições logo no começo ao Claude Code.

Item	O que informar	Motivo
Áreas	header, sidebar, main, footer, cta	Estabiliza os nomes de `grid-template-areas`
Largura mínima	Cards com 280px ou mais, corpo perto de 65ch	Evita que texto e imagem fiquem espremidos
Elasticidade	Espaço com `1fr`, cards com `auto-fit`	Cresce e encolhe de forma natural por largura
Prioridade	CTA, tabela de preços, corpo, anúncios	Não quebrar a rota de receita
Larguras de teste	360px, 768px, 1024px, 1440px	Evitar decidir só pelo visual no desktop

O pedido pode ser curto, mas “deixe responsivo” é fraco. Especifique até onde dói quebrar: “no celular uma coluna, no tablet duas, no desktop com sidebar; o bloco de código e o CTA não podem transbordar”. Depois da implementação, peça ao Claude Code para revisar “falta de min-width: 0, larguras fixas, nomes de área que não batem, operação por teclado e rolagem horizontal”.

Prompt recomendado

Implemente esta melhoria UI com a menor mudança segura.
Mantenha rotas, componentes, design tokens e CTA principal.
Retorne código copiável, use case, pitfall, revisão mobile e rollback.
Finalize com review checklist para humanos.

Use case checklist

Conteúdo: busca, artigos relacionados, consulta e download fáceis de encontrar.
SaaS: menos passos sem perder teclado, mobile e estados de erro.
Produto: preço, compra, anúncios e formulários continuam prioritários.
Time: Claude Code entrega código e checklist de revisão.

Código de implementação

<main class="dashboard-layout">
  <section class="hero">Hero and CTA</section>
  <aside class="filters">Filters</aside>
  <section class="cards">Metric cards</section>
  <section class="table">Recent activity</section>
</main>

.dashboard-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "hero"
    "filters"
    "cards"
    "table";
}

.hero { grid-area: hero; }
.filters { grid-area: filters; }
.cards {
  grid-area: cards;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.table { grid-area: table; min-width: 0; overflow-x: auto; }

@media (min-width: 900px) {
  .dashboard-layout {
    grid-template-columns: 18rem minmax(0, 1fr);
    grid-template-areas:
      "hero hero"
      "filters cards"
      "filters table";
  }
}

min-width: 0, auto-fit e auto-fill

O detalhe mais importante do exemplo acima é min-width: 0 na área da tabela. Um item de Grid pode ser puxado pela largura mínima do seu conteúdo: URLs longas, tabelas e blocos de código empurram a largura para fora. min-width: 0 diz ao navegador “esta área pode encolher”. É uma armadilha frequente em páginas de artigo, painéis SaaS e sites de documentação.

auto-fill e auto-fit parecem iguais, mas diferem. auto-fill mantém colunas vazias reservadas; auto-fit recolhe as colunas vazias e estica os cards existentes. Para cards de artigo ou tabelas de preço, em que você quer aproveitar a largura mesmo com poucos itens, auto-fit é mais fácil de usar. Já em UIs como calendário ou mapa de assentos, em que o espaço vazio também tem significado, auto-fill costuma ser mais natural. Como base, use repeat(auto-fit, minmax(min(100%, 280px), 1fr)) e só ajuste com media query quando precisar.

Pitfall checklist

Não otimize só para screenshot.
Verifique textos longos, code blocks e tabelas no mobile.
Não comunique estado apenas por cor.
Evite mudanças em arquivos sem relação.
Teste 375px, teclado, rede lenta e erros.

Falhas comuns em produção

A mais frequente é deixar grid-template-columns: repeat(3, 1fr) escrito para desktop e levar para o celular. A 360px de largura, o layout tenta manter três colunas, os cards ficam espremidos e botões ou palavras longas transbordam. A segunda é o erro de nome em grid-template-areas: se o CSS diz "sidebar main" mas o filho usa grid-area: side;, nada é posicionado como esperado. Ao mandar o Claude Code corrigir, peça primeiro a lista de nomes de área e só então a alteração.

A terceira é confundir onde usar Grid e onde usar Flexbox. A página inteira e a lista de cards pedem Grid; ícone com texto dentro de um botão, navegação em linha e pequenos arranjos dentro do card pedem Flexbox. Tentar resolver tudo com apenas um deles torna o CSS difícil de ler. A quarta é inserir anúncios e CTA depois: ao adicionar anúncio, PDF gratuito ou link de produto após a publicação, o espaçamento e a ordem do Grid podem quebrar. Coloque a rota de receita como uma área desde o início, em uma posição que não atrapalhe o corpo no mobile.

Verificação

Rode build e revise mobile. Confirme ausência de overflow, rolagem de code block, CTA, formulários e anúncios visíveis. Peça uma segunda review a Claude Code com arquivos alterados, riscos, código removível e rollback.

Monetização

Esse tema afeta anúncios, consulta, cards de produto, preços e formulários. Para transformar em processo, use treinamento e consultoria Claude Code.

Revisão adicional

Antes de publicar, reúna screenshots, teclado, largura mobile, rede lenta, erros e CTA em uma checklist. Assim Claude Code gera uma melhoria conectada ao negócio, não apenas código. Complexidade que pode ser removida também é ganho.

Nota prática

Testei separando implementação e review. O diff ficou menor e problemas de layout apareceram antes do deploy. Bastou colocar min-width: 0 e auto-fit + minmax() logo no início para reduzir bastante o transbordo horizontal de cards e CTA. Já os layouts decididos apenas por screenshot na largura de desktop quebravam assim que entravam anúncios ou títulos longos.