Grid
O Grid fornece as bases para o posicionamento de elementos. Ajuda a criar interfaces mais consistentes e harmoniosas, facilitando a leitura e o entendimento do conteúdo.
Estrutura do grid
É composto por 3 estruturas fundamentais:
Margens (margins)
As margens ficam nas extremidades, à esquerda e à direita do grid. Existem 3 margens mínimas distintas:
- 48px no desktop
- 32px no tablet
- 16px no mobile
Calhas (gutters)
As calhas são os espaçamentos entre as colunas. Existem 3 calhas com tamanhos distintos:
- 24px no desktop
- 16px no tablet
- 8px no mobile
Colunas (columns)
O grid pode ter, no máximo, 12 colunas na versão desktop, 8 na versão para tablets e 4 colunas para mobile. A diagramação dos blocos de informações na área de conteúdo deve sempre respeitar o grid.
As colunas podem variar de tamanho de acordo com a largura total da página onde o grid está aplicado e devem ocupar, no máximo, 1280px de largura.
Breakpoints
| Token | Breakpoint | Qtd. Colunas | Tam. Calhas | Tam. Margens | Larg. máx. conteúdo |
|---|---|---|---|---|---|
--breakpoint-xs | 480px | 4 | 16px | 16px | 448px |
--breakpoint-sm | 768px | 8 | 16px | 32px | 704px |
--breakpoint-md | 1024px | 12 | 24px | 48px | 928px |
--breakpoint-lg | 1280px | 12 | 24px | 48px | 1184px |
--breakpoint-xl | 1440px | 12 | 24px | Fluida | 1280px |
--breakpoint-max | 1920px | 12 | 24px | Fluida | 1280px |
Grid fixo vs. fluido
A maior parte das telas do produto deve usar o grid de largura máxima fixa de 1280px.
Este grid é adaptável à resolução acima de 1024px, sempre mantendo margem de 48px e usando colunas de tamanho variável, até atingir a largura máxima de 1280px. Acima disso, o grid se mantém fixo, tendo apenas suas margens ajustadas.
O grid fluido deve ser utilizado em casos específicos, como dashboard em tela cheia, CRM Live, aplicações em televisores e telas maiores.
Navegação principal
A navegação é sempre fluida e se expande de acordo com a largura da tela. O grid não interfere na disposição dos elementos da navegação principal.
Feedback
Para reportar algum problema ou sugerir alterações, use nosso formulário de melhorias ou, se preferir, abra uma issue no nosso Github.