Grids and layout create how content is constrained on a page.
When to use this pattern
This pattern is used in all instances of page content creation. Mobile and desktop/tablet are formatted slightly different however. The content will always be the same on all devices but perhaps ordered slightly differently(in blocks).
This pattern helps to meet the user by constantly placing content in a organised manner that will be simple and easy to comprehend consistently.
Desktop/Tablet
Mobile
How it works
Layout for a desktop/tablet page is broken into thirds(three columns):
As a primary rule we keep primary content on the left column that stretches across two thirds and supportive content on a right aligned column:
When translating a desktop/tablet page layout for a mobile page the columns are stacked on top of each other:
Landning pages like the home or dashboard are the only instances where the three column layout can be used.
Layout/Grids
Overview
When to use this pattern
How it works
Research on this pattern
Related patterns