Skip to content
Design Guidelines

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.

Grid columns

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.

ResolutionColumnsGutter
1024 px1216 px
1280 px1232 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.
Universidade Federal de Santa CatarinaLaboratório Bridge
Siga o Laboratório no LinkedinPágina do Laboratório no FacebookRepositório GithubSiga o Laboratório no Instagram

Laboratório Bridge. 2019.