You appear to be using an unsupported browser, and it may not be able to display this site properly. You may wish to upgrade your browser.

Column grid

The column grid used by Design System page layouts.

The Design System uses a column grid as the underlying structure on web pages. This helps web pages to:  

  • have consistent layouts 
  • adapt to different viewport sizes, by increasing the number of grid columns 

The column grid sits in a container. You can view the column grid in the styles section of the Design System Figma library

Column grid sizing 

The number of columns in the grid increases when the viewport reaches set widths (breakpoints). The table shows the breakpoints for the Design System.  

Container width and column number breakpoints in the Design System
Breakpoint Viewport width Container width Columns
Default up to 480 px Fluid 2
Small 480 to 767 px Fluid 6
Medium 768 to 991 px 736 px 12
Large 992 to 1199 px 928 px 12
Extra large 1200 px and above 1120 px


On small viewports, up to 767 pixels wide, the column grid fills the width of the page.  

On viewports 768 pixels or larger, the column grid is centered in the browser window at a fixed width for each breakpoint. 

When the browser window is large enough to use a fixed width column grid, each column's width is a multiple of 8 pixels. This follows the internal grid for Design System components. 

The column grid uses 32-pixel gutters. The container has 16-pixel padding on the left and right.   

Back to top