A grid system is the base for all interface design.

The grid system displayed here is defined for the Portal and focused on desktop. It includes three sizes (M, L, and XL), and two breakpoints (1200 px and 1440 px). The content will adjust to the grid according to the viewport size.

Breakpoints

Medium (≤ 1199 px)

• Viewport smaller than 1199 px
• 12 stretcheable columns
• Gutter: 24 px
• Margins: 24 px

M (≤ 1199 px)

Large (1200 px - 1440 px)

• Viewport between 1200 px and 1440 px
• 12 stretcheable columns
• Gutter: 24 px
• Margins: 48 px

L (1200 px - 1440 px)

Extra Large (≥ 1441 px)

• Viewport larger than 1441 px
• 12 columns, fix width: 90 px
• Centered
• Gutter: 24 px

XL (≥ 1441 px)