Columns grid

We apply a wide and narrow layout format. In the wide layout format (1200px width), the page contents may employ up to 4 columns and use a margin of 24px.

In the narrow layout format (750px width) the page contents may employ up to 2 columns.

Column width uses percentages, rather than fixed values.

Gutters, or the spaces between columns, use a fixed value (24px).

Image of different column layouts on Alberta.ca

Responsive

For desktop, tablet and mobile there is a 24px margin.

Two columns in desktop will become one column in tablet and mobile.

Image of a 2 column responsive grid.

Three columns in desktop will become one column in tablet and mobile.

Image of a 3 column responsive grid.

Four columns in desktop will become 2 columns in tablet and one in mobile.

Image of a 4 column responsive grid.