Last reviewed: 14 April 2021

Layout

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

The 12 columns of the grid that is used for designing digital content at Co-op.

Columns

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

Grid with gutter spacing between each of the 12 columns.

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

Get support

Co-op Digital colleagues can get support in our dedicated Slack channel:

#experience-library-support

Sign up for email updates

Get updates about changes and developments.

Sign up

Copyright © Co-operative Group Limited. All rights reserved.