Grid & Layout

Grid é a estrutura invisível que organiza tudo. Não aparece, mas quando falta, a interface parece bagunçada. Quando sobra, parece rígida demais. O equilíbrio está em ter grid e saber quando ignorá-lo.

Por que grid

Grid resolve dois problemas:

• Alinhamento: elementos ficam em colunas, não espalhados
• Ritmo: espaçamentos consistentes criam uma sensação de ordem que o usuário percebe mesmo sem saber o porquê

Sem grid, cada decisão de layout vira negociação. Com grid, a decisão já está tomada: o elemento ocupa 1, 2 ou 4 colunas. O resto é conteúdo.

CSS Grid vs Flexbox

A regra é simples:

• Grid para layout bidimensional (linhas e colunas ao mesmo tempo)
• Flexbox para unidimensional (uma fileira ou uma coluna)

Na prática: página inteira usa Grid. Barra de navegação usa Flexbox. Card com conteúdo variável usa Flexbox. Galeria de imagens usa Grid. Não tente forçar um no lugar do outro. Cada um tem um propósito e quando você usa o certo, o código fica mais curto e o comportamento mais previsível.

Container e max-width

Conteúdo precisa de limite. Texto que ocupa a largura inteira de um monitor de 27 polegadas é ilegível. A métrica clássica de tipografia diz que uma linha deve ter entre 45 e 75 caracteres. Na prática:

• Texto corrido: max-w entre 640px e 760px
• Layouts amplos: dashboards e tabelas podem ir além
• Regra: o conteúdo de leitura sempre volta para a coluna estreita

/* Container de leitura */
.prose {
  max-width: 65ch;
  margin-inline: auto;
}

/* Container de layout */
.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

Responsividade

Responsivo não é só sobre telas menores. É sobre contexto:

• Mobile: layout vertical, toque substitui hover, espaço limitado
• Desktop: largura para colunas lado a lado, hover para feedback

A abordagem mobile-first funciona porque força você a pensar no essencial primeiro. O que fica de fora quando a tela é pequena é o que não era tão importante assim.

A decisão

Neste guia, o layout de documentação usa Grid implicitamente: sidebar fixa à esquerda, conteúdo centralizado, ToC à direita. O conteúdo principal respeita o limite de 680px. No mobile, as colunas laterais somem e o conteúdo ocupa tudo.

Os breakpoints seguem o Tailwind: sm (640px), md (768px), lg (1024px), xl (1280px). Não inventamos novos. São suficientes para 99% dos casos.