Layout Grid

Use the ONS grid system to lay out the content on your service’s pages.

Mobile first

We use a responsive, mobile first approach that allows layouts to change to suit the device being used to access the page. The responsive nature of the grid ensures that users have the best available experience regardless of their device or orientation.

The Grid

We have a flexible grid based on 12 columns, each column has a percentage calculated width. We use a set of device agnostic breakpoints to change the layout when best suited as opposed specific devices. The example below shows the full 12 column grid: