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.

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
Back to top