(e)Grids

< Pattern Library

Overview

Grids combined with layout create how content is constrained on both mobile and desktop/tablet.

Use of 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.

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.
• Landing pages like the home or dashboard are the only instances where the three column layout can be used in a bespoke manner.

Research on this pattern

• https://govuk-elements.herokuapp.com/layout/

Related patterns

Other