Column grid

A column grid underpinning your site helps you create many different layouts while maintaining a cohesive appearance across your site.

The Design System's column grid scales the number of grid columns according to the browser window size.

On smaller browser windows, up to 768 pixels wide, the column grid fills the whole width of the page. On browser windows larger than that, the column grid is centered in the browser window at a fixed size 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, which follows the internal grid used for Design System components.

Container width and column counts for named breakpoints used in the Design System

Name	Minimum viewport width	Container width	Columns
Default	-	Fluid	2
Small	480 px	Fluid	6
Medium	768 px	736 px	12
Large	992 px	928 px	12
Extra large	1200 px	1120 px	12