Column grid

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	12

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.