Grid
Grid systems are used to guide the page construction through a series of rows and columns that arrange your content. Consistent use of a grid system provides the foundation for a harmonic page with well-positioning elements on the screen. The design system uses a 12 columns system, varying the gutter and the size of the columns according to the page resolution.
Side menu
When the page has a fixed side menu, it will be positioned outside the boundaries of the grid, including the margins. The main content is moved aside to provide space for the side menu, and the grid and content area are condensed.
Breakpoints
The number of columns is independent of the size of the window and is always 12.
Resolution | Columns | Gutter |
---|---|---|
1024 px | 12 | 16 px |
1280 px | 12 | 32 px |
Best practices:
- Use multiples of 8px when setting sizes, spacing, and element positions.
- Whenever possible, align the elements, vertically and horizontally.
- Use good spacing between the page content blocks. This creates a visual grouping between similar items and makes navigation easier.