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.