Skip to content

Notifications

Government mail service may be affected by the Canada Post labour disruption. See how to send and receive government mail during this time. 

AI search tool

Try our new Search AI tool as an alternative to the search below to improve your experience on Alberta.ca using artificial intelligence. See the AISearch fact sheet for more information.

Popular topics:

Part of Design standards checklist

Grids

Specifications for column responsive design and layout.

Explore pages in:
Design standards checklist

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.
Previous Clickable objects
Next Visual quality