Grid

O grid é uma estrutura que ajuda a organizar elementos em uma página de forma consistente

Definições Gerais

Esta documentação define a arquitetura do Sistema de Grid Intrínseco para as páginas de conteúdo. O sistema prioriza o conteúdo: Ele dita o espaço e o layout se adapta organicamente.

Max-grid

A partir da largura total da tela do dispositivo, subtrae-se a Margin. Todo o espaço restante é disponível para o conteúdo. O max-width que o conteúdo pode ocupar é de 1444px.

Grid aplicado em tela de 1920px

Margin

Nesse cenário, a Margin é fluida de forma contextual e varia para garantir legibilidade e agrupamento dos conteúdos:

Largura da Tela	Margem	Comportamento do conteúdo
Até 799px	20px fixos	Largura da tela - Margin = Espaço de conteúdo
800px até o maxgrid (1444px)	7% da largura da tela	Largura da tela - Margin = Espaço de conteúdo
A partir do maxgrid (1444px)	7% do max-grid (101px)	Maxgrid - Margin = Espaço de conteúdo

Margin em tela de 1920px

Lógica de Escala e Prioridade

Cada componente possui um comportamento fluido documentado.

O redimensionamento não é uniforme: existe uma hierarquia de prioridade que define quais elementos preservam sua integridade e quais cedem espaço conforme a variação da tela.

Breakpoints

• Em telas <1024px, o conteúdo e anúncios serão sempre empilhados, tanto em mobile, quanto em desktop.

• Em telas <800px, é forçado um user-agent mobile, garantindo que todos os componentes se comportarão da mesma forma.

Aplicações específicas

Telas com coluna secundária

Em telas que usam a coluna secundária, existe um padrão no espaçamento entre as colunas para garantir a melhor distribuição do conteúdo

Secondary Column size

A prioridade é sempre da coluna principal, onde o conteúdo vai ser alocado.

A coluna secundária é uma coluna auxiliar e, por isso, tem valores fixos de tamanho que variam de acordo com os breakpoints

Tela menor que 1280px	Tela maior ou igual que 1280px
300px	360px

Column gap size

O valor de espaçamento entre a coluna de conteúdo e coluna secundária é uma porcentagem da tela do usuário, com valores mínimos e máximos pré-estabelecidos

Tamanho mínimo	Tamanho ideal	Tamanho máximo
30px	5,4% do tamanho da tela	104px

---

Histórico de Atualizações

Figma	Gitbook	Android	iOS	Web
28/01/2026	29/01/2026			Ver na tabela

Atualizações por data

Janeiro 2026

29/01/2026

• Remoção de lógica de colunas

• Adaptação das margens e adição de regra de gap de colunas

Percebeu um erro, ficou com dúvida ou tem uma sugestão?

Contribua com o Kósmos preenchendo nosso formulário de contribuição — sua colaboração ajuda a tornar o Design System mais claro, útil e evolutivo para todo o time.