# Grids & Layout — Fundação do Design System Phorte

> Como montar a página: o contêiner `pagina` (1320px), a grade de uma coluna que vira duas, três ou quatro, a medianiz e as larguras de leitura.

- Página: https://phorte-design-system.vercel.app/styleguide/fundacao/grids
- Índice do design system: https://phorte-design-system.vercel.app/llms.txt

## 1. A página: `pagina`

Toda seção põe o conteúdo dentro da utilidade `pagina`: até **1320px** (`--container-pagina`), centrada, 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. Em uso 29 vezes nas peças.

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

## 2. A grade

Não há grade de 12 colunas. Comece pelo celular, sem prefixo, e acrescente o que muda: `md:` no tablet, `lg:` no computador (ver Breakpoints).

| 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` |

Uso medido: `md:grid-cols-2` (26), `grid-cols-1` (20), `lg:grid-cols-4` (10), `md:grid-cols-3` (9), `lg:grid-cols-2` (9), `lg:grid-cols-3` (8), `grid-cols-2` (5), `lg:grid-cols-6` (1).

## 3. A medianiz

24px entre cartões é o padrão, 16px em listas densas, 32px entre blocos grandes (`gap-6`, `gap-4`, `gap-8`, ou `gap-espaco-N` pelo nome). Nas grades das peças: `gap-6` (14), `gap-8` (13), `gap-3` (11), `gap-4` (10), `gap-10` (2).

## 4. Larguras de leitura e de peça

Texto corrido até ~80 caracteres por linha (`max-w-prose`, `max-w-2xl`, `max-w-3xl` no parágrafo). Larguras escritas à mão, cada uma de uma peça: calc(100vw-2rem), calc(100%-2rem), 90%, 800px, 600px, 180px, 400px, 12rem.