Our layout grids are there to adapt to screen size and orientation, ensuring consistency across layouts.
Grid
Our grid adapts to screen size and orientation and helps bring continuity and consistency across all screens of the same application. It scales up to 12 columns as the device or viewport size increases, allowing you to creating consistent page layouts through a series of rows and columns for your content.
How it works
The grid responses to the actual size of the screen at that moment. Elements that, for example, are vertically stacked and full-width on the smallest screens become wider and could eventually get placed next to each other as the screen sizes increases, following the rules of the grid system. In this way we are able to present users with the most optimal view and ensure consistency for page layouts per touchpoint.
Columns, gutters and margins
Our grid is made up of three elements: columns, gutters, and margins.
Columns are the vertical areas of the grid containing the content. The number of columns and the width of the content are related to each other. Columns don’t have a fixed size but are based on percentages. This allows the grid to grow and adapt to the screen size.
Gutters are the vertical space between the columns and are fixed units. They help to separate the content on the screen. The fixed units of the gutters can change based on the screen size, or better said the breakpoint range.
Margins are the space between content and the left and right edges of the screen. Just like the gutters, margins are fixed units that depend on the breakpoint range.
Accessibility considerations
A grid should adapt to multiple circumstances. As mentioned, one of those are different screen sizes and orientation. Another aspect are user specific preferences like the zoom amount. A layout should never break and content should automatically reflow to fit the available space without introducing horizontal scrolling.