Grid
The Grid provides the basis for positioning elements. It helps to create more consistent and harmonious interfaces, making the content easier to read and understand.
Grid structure
It consists of 3 fundamental structures:
Margins
Margins are at the ends, left and right of the grid. There are 3 distinct minimum margins:
- 48px on desktop
- 32px on tablet
- 16px on mobile
Gutters
Gutters are the spacings between the columns. There are 3 gutters with different sizes:
- 24px on desktop
- 16px on tablet
- 8px on mobile
Columns
The grid can have a maximum of 12 columns in the desktop version, 8 in the tablet version and 4 in the mobile version. The diagramming of information blocks in the content area must always respect the grid.
Columns can vary in size according to the total width of the page where the grid is applied and must occupy a maximum of 1280px in width.
Breakpoints
| Token | Breakpoint | Columns Quantity | Size Gutters | Size Margins | Width max. contents |
|---|---|---|---|---|---|
--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 | Fluid | 1280px |
--breakpoint-max | 1920px | 12 | 24px | Fluid | 1280px |
Fixed Grid vs. Fluid Grid
Most product screens should use the fixed maximum width grid of 1280px.
This grid is adaptable to resolutions above 1024px, always keeping a margin of 48px and using columns of variable size, until reaching the maximum width of 1280px. Above that, the grid remains fixed, with only its margins adjusted.
The fluid grid should be used in specific cases, such as full-screen dashboard, CRM Live, applications on televisions and larger screens.
Main navigation
Navigation is always fluid and expands according to the width of the screen. The grid does not interfere with the layout of the main navigation elements.