Grid

We use a grid to structure our designs and create consistent spacing. It gives us a flexible way to layout components that adapts to different device sizes.

Guidelines

Columns

The grid has 12 columns. The widths of the columns change with the size of the device.

Gutters

Gutters are the gaps between the columns.

They are:

fixed to 32px for browser widths above 1300px
fixed to 16px for browser widths below 1300px

Grid with the 16 pixel margin spacing on the far left hand side and far right hand side.

Grid margins

Grid margins make sure there is always white space around the content. The grid margins are 16px wide.

Possible arrangement of content laid out across the grid.

Layout

Components and content can be laid out across as many grid columns as needed.

12 column grid with large space on the far left hand side and far right hand side.

Fixed width grid

The fixed width grid has a container around it that keeps the maximum size centred in the browser at 1440px.

12 column grid with small space on the far left hand side and far right hand side.

Full width grid

The full width grid allows the content to stretch right to the edges of the browser. This is useful when you’re creating detailed applications that might need to use the whole screen.

Full grid values used across breakpoints (device sizes)

Min width	Breakpoint	Columns	Fixed width grid	Full width grid
320px	xxsmall	2	100%	100%
414px	xsmall	2	100%	100%
600px	small	6	100%	100%
768px	medium	12	100%	100%
1024px	large	12	100%	100%
1300px	xlarge	12	100%	100%
1440px	xxlarge	12	1440px, centred	100%

Illustration of three different sized devices showing the number of columns in the grid adapting to device width.

Tablet and mobile grid

With a browser under 600px, the number of columns drops from 12 to 6. With a browser under 414px, the number of columns drops to 2 columns.

Possible example of how to center content across the grid.

Centering content

Content on the page does not always have to span 12 columns. Components can be centred within a specified amount of columns.

Possible example of how to offset content across the grid.

Offsetting content

Content can also be offset by a specified amount of columns. Offset can be changed or removed at different device sizes.

Illustration of two different sized devices showing content changing order of position depending on device width.

Reversing the order of components on different sizes of device

Components can be re-ordered to change the prominence of content across different device sizes.

Changelog for this page

Date	Notes
14 April 2021	First version of page published