F3.3 · Fundações

Grid & Breakpoints

Grade responsiva de duas configurações: 2 colunas em mobile, 12 colunas em tablet+. Cinco breakpoints, cinco larguras máximas progressivas. Calha sempre 24px.

Breakpoints

Token	Min-width	Dispositivo típico	Colunas
xs	0	Smartphone vertical	2
sm	576px	Smartphone horizontal	2
md	768px	Tablet vertical	12
lg	1080px	Tablet horizontal / laptop pequeno	12
xl	1440px	Desktop	12

O breakpoint mais crítico é 1080px: nele, o app-shell deixa de ser responsivo e o sidebar vira drawer.

Larguras máximas (containers)

Cinco patamares progressivos. Use o menor que ainda preserve o ritmo do conteúdo.

Nome	Largura	Quando usar
narrow	544px	Formulário focal, modal de conteúdo.
read	704px	Texto longo (artigo, FAQ).
app	928px	Página de configurações, listas densas.
guide	1136px	Padrão de páginas deste guia.
hero	1376px	Hero editorial, dashboards amplos.

Comportamento de colunas

/* Padrão de página */
.main {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-10) var(--sp-9);
}

/* Grid 12-col em md+ */
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
@media (max-width: 768px) {
  .grid-12 { grid-template-columns: repeat(2, 1fr); }
}

MigraçãoLayouts ímpares (3 colunas em 12-grid = 4-4-4 ou 5-4-3) escolhem composição assimétrica deliberada — nunca como erro. Anote a intenção.