faculdadephorte.edu.br

Grids & Layout

Três camadas, de fora para dentro: a página (um contêiner de 1320px, centrado, com respiro nas laterais), a grade (uma coluna no celular que vira duas, três ou quatro) e a largura de leitura (o texto corrido não passa de ~80 caracteres por linha). Não há grade de 12 colunas: as peças não precisam dela.

Ver como Markdown

1. A página: a utilidade pagina

Toda seção põe o conteúdo dentro de pagina: largura de até 1320px (o token --container-pagina), centrado na tela, com 16px de respiro de cada lado no celular e 24px a partir do tablet. O fundo da seção vai de ponta a ponta; só o conteúdo para em 1320px.

<section className="bg-card py-16">
  <div className="pagina">…</div>
</section>

Em uso: 29 vezes nas peças. Escrever mx-auto max-w-[1200px] px-4 à mão é o que existia antes dela (E56): três larguras para a mesma ideia.

2. A grade: uma coluna que vira duas, três ou quatro

Comece pelo celular, sem prefixo, e acrescente o que muda em cada faixa (Breakpoints): md: no tablet, lg: no computador. As receitas abaixo são as que as peças já usam.

Receitas de grade por tipo de conteúdo, nas três faixas
Conteúdo	Celular	Tablet	Computador	Classes
Cartões (curso, evento, blog)	1 coluna, ou trilha que rola de lado	2 colunas	3 colunas (4 para cartões pequenos)	`grid grid-cols-1 gap-espaco-6 md:grid-cols-2 lg:grid-cols-3`
Números, ícones, selos	2 colunas	2 colunas	4 colunas	`grid grid-cols-2 gap-espaco-6 lg:grid-cols-4`
Texto e imagem, formulário e texto	um embaixo do outro	um embaixo do outro	lado a lado	`grid grid-cols-1 gap-espaco-8 lg:grid-cols-2`
Campos de formulário curtos (nome e e-mail)	1 coluna	2 colunas	2 colunas	`grid grid-cols-1 gap-espaco-6 md:grid-cols-2`

O uso medido nas peças, do mais comum ao menos:

md:grid-cols-226
grid-cols-120
lg:grid-cols-410
md:grid-cols-39
lg:grid-cols-29
lg:grid-cols-38
grid-cols-25
lg:grid-cols-61
md:grid-cols-41
lg:grid-cols-121

3. A medianiz: o espaço entre colunas

O gap sai da escala de espaçamento: 24px entre cartões é o padrão, 16px em listas densas e 32px entre blocos grandes — gap-6, gap-4 e gap-8, ou gap-espaco-6, gap-espaco-4 e gap-espaco-8 pelo nome (o mesmo valor). Nas grades das peças, hoje: gap-6 (14×), gap-8 (13×), gap-3 (11×), gap-4 (10×), gap-10 (2×).

4. Larguras de leitura e de peça

Dentro da página, o texto corrido para em ~80 caracteres por linha (regra do A11Y.md, §4): max-w-prose, max-w-2xl ou max-w-3xl no parágrafo, nunca na seção. Linha longa demais faz o olho se perder na volta.

max-w-2xl22
max-w-3xl10
max-w-4xl6
max-w-sm3
max-w-xl3
max-w-5xl3
max-w-md2
max-w-6xl2

Sobram 8 larguras escritas à mão — calc(100vw-2rem), calc(100%-2rem), 90%, 800px, 600px, 180px, 400px, 12rem —, cada uma de um componente só: o teto de um cartão, de um campo, de um aviso que não encosta na borda da tela. Não brigam com a página, e a trava larguraArbitraria do audit conta as que estão em pixel, para não aparecer a próxima.