Grids

O grid é uma estrutura que ajuda a organizar elementos em uma página. Ele combina várias colunas e linhas, permitindo que organizemos elementos da UI de forma consistente.

✅ Atualizado (29/01/2025) - Ver detalhes

Janeiro

• 29/01/25

  Criada toda documentação e definições dos novos grids.

Anatomia

1

Canvas

Tamanho total do frame, equivale a resolução definida do grid para a criação de novos layouts.

canvas vertical: desktop, mobile e tablet canvas horizontal: mobile e tablet

2

Tamanho do grid

O tamanho do grid é definido a partir da resolução, considerando margem, gutter e colunas. A margem e o gutter sempre são fixos e as colunas são fluídas.

Tamanho máximo: 1584px

3

Margin do grid

A margin do grid refere-se ao espaço mínimo fixo que delimita as bordas externas do layout e evita que os elementos fiquem colados às extremidades da tela.

Desktop: mín. de 84px Tablet: 24px Mobile: 16px

4

Content

Área útil do grid é a região central destinada à disposição dos elementos do conteúdo principal, desconsiderando as margens do grid.

Tamanho máximo: 1416px

Colunas, Margins e Breakpoints

Acima as representações visuais das colunas, margins e breakpoints.

Largura da tela / Breakpoint	Margin	Content Grid	Colunas	Gutter
<700px	16px	adaptável	12	16
≥ 700px até 1199px	24px	adaptável	18	16
≥1200 até ∞	mín 84px	máx 1416px*	18	24

Exceção

Para artigos de leitura como blog e termos de uso a limitação do content grid é até 696px, mantendo as mesmas regras de colunas e margins de acordo com os breakpoints.

Essa limitação existe para promover uma leitura mais confortável na tela.