# Grid e layout

Fonte: Figma do Design System T2 (extraído em 2026-10-12, última edição do arquivo em 2026-10-09). Site: https://design.t2.com.br.

O grid é a régua invisível da página: divide a largura em colunas iguais para que tudo se alinhe em qualquer tamanho de tela. Os componentes ocupam "X colunas" em vez de larguras soltas em pixels.

| Peça | Valor (desktop) | O que é |
| --- | --- | --- |
| Colunas | 12 no desktop | Faixas onde o conteúdo vive. |
| Gutter | 24px entre colunas | Espaço fixo entre colunas. |
| Margem | 64px nas laterais | Respiro nas laterais da tela. |

## Breakpoints

| Breakpoint | Largura | Colunas | Gutter | Margem | Conteúdo máximo |
| --- | --- | --- | --- | --- | --- |
| Mobile | até 599px | 4 | 16px | 16px | Fluido (ocupa a tela) |
| Tablet | 600–1023px | 8 | 24px | 32px | Fluido |
| Laptop | 1024–1279px | 12 | 24px | 40px | Fluido |
| Desktop | 1280–1599px | 12 | 24px | 64px | 1312px |
| Wide | 1600px ou mais | 12 | 32px | 80px | 1440px, centralizado |

Variáveis em `tokens.css`: `--midas-grid-columns`, `--midas-grid-gutter`, `--midas-grid-margin` e `--midas-grid-max-width` mudam sozinhas por breakpoint (mobile-first, com `@media (min-width)` em 600, 1024, 1280 e 1600px).

```css
.page {
  display: grid;
  grid-template-columns: repeat(var(--midas-grid-columns), minmax(0, 1fr));
  column-gap: var(--midas-grid-gutter);
  padding-inline: var(--midas-grid-margin);
  max-width: var(--midas-grid-max-width);
  margin-inline: auto;
}

.card { grid-column: span 4; }
```

## Telas de referência

Desenhe em 1440×1024 e teste nas telas reais. Os tamanhos são em pontos (o que o navegador enxerga), não a resolução física. A barra do navegador come ~110px de altura no desktop.

| Tela | Tamanho | Breakpoint |
| --- | --- | --- |
| iPhone 16 / Android | 393×852 · 412×915 | Mobile |
| iPad Air 11" | 820×1180 em pé · 1180×820 deitado | Tablet / Laptop |
| Notebook Windows (Menor tela de desktop suportada.) | 1366×768 (≈ 656 de altura útil) · 1536×864 | Desktop |
| Desktop de referência (Referência principal de layout.) | 1440×1024 (≈ 912 útil) | Desktop |
| MacBook Air 13" / Pro 14" | 1470×956 · 1512×982 (≈ 845–870 útil) | Desktop |
| MacBook Air 15" / Pro 16" | 1710×1112 · 1728×1117 | Wide |
| Monitor Full HD / iMac 24" / 27" | 1920×1080 · 2240×1260 · 2560×1440 | Wide (conteúdo trava em 1440) |

## Contêineres

- **Contido**: O conteúdo respeita margem e largura máxima. Padrão para texto, listas e formulários.
- **Fluido**: Usa a largura toda menos a margem. Dashboards e tabelas.
- **Full-bleed**: O fundo vai de ponta a ponta, mas o texto continua alinhado ao grid. Hero, faixas de destaque, vídeo.
- **Full viewport**: Ocupa a tela inteira, 100% de largura e de altura (100dvh). Hero imersivo.

## Modelos de página

- **Dashboard**: Header 12, Hero 12, 4 cards de 3 col; conteúdo 8 + lateral 4.
- **Cards**: Título + filtros 12; cards de 4 col (3 por linha).
- **Article**: Mídia 8, título 8, texto 8 (offset 2).
- **Split**: Mídia 6 + formulário 6.
- **Bento**: Destaque 8 + 4, depois blocos de 4 e 6 col.
- **Sidebar no grid**: Sidebar 3 + conteúdo 9, para páginas de conteúdo.
- **Sidebar colada**: Sidebar de 264px fora do grid (rail de 72px no tablet); o grid de 12 colunas começa depois dela, com margem de 40px.
- **Full viewport**: Hero 100dvh, altura mínima de 560px, conteúdo ancorado embaixo.
- **Full-bleed band**: Faixa de ponta a ponta com conteúdo alinhado ao grid.

## Sidebar: colada ou no grid

Colada (padrão da plataforma): encosta na borda da tela, largura fixa de 264px (rail de 72px no tablet), fica FORA do grid. No mobile vira drawer e a navegação principal vai para a Bottom Navigation. No grid: ocupa 3 das 12 colunas e respeita a margem. Regra: navegação do produto → colada. Navegação dentro de uma página → no grid.

## Ritmo de 8px

4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px, 64px, 80px. Todo espaçamento é múltiplo de 4 ou 8 (tokens `space/4` a `space/80`).

## Decisões e regras

- Desenhe em 1440×1024 e confira em 1366×768 (notebook mais baixo) e 1920×1080 (monitor largo) antes de aprovar.
- Larguras de conteúdo vêm de colunas (card = 4 col, texto = 8 col), nunca de pixels soltos.
- Texto corrido nunca passa de 8 colunas no desktop (≈ 70 caracteres por linha).
- Em telas largas o conteúdo trava em 1440px e centraliza; só fundos, imagens e vídeos vão de ponta a ponta.
- Hero de tela inteira usa 100dvh (não 100vh), com altura mínima de 560px; o conteúdo fica ancorado embaixo e sempre cabe em 1366×768.
- Sidebar fixa (Navigation) fica fora do grid; o grid de 12 colunas começa depois dela.
- Espaçamentos só com tokens space/* (múltiplos de 4/8).