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 Image of different column layouts on Alberta.ca](/system/files/styles/responsive_1040/private/custom_downloaded_images/cpe-columns-grid.png?itok=Krn0VIc6)
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. Image of a 2 column responsive grid.](/system/files/styles/responsive_1040/private/custom_downloaded_images/cpe-responsive-grid-2-column.png?itok=K5gJrmPh)
Three columns in desktop will become one column in tablet and mobile.
![Image of a 3 column responsive grid. Image of a 3 column responsive grid.](/system/files/styles/responsive_1040/private/custom_downloaded_images/cpe-responsive-grid-3-column.png?itok=1bhzJH3e)
Four columns in desktop will become 2 columns in tablet and one in mobile.
![Image of a 4 column responsive grid. Image of a 4 column responsive grid.](/system/files/styles/responsive_1040/private/custom_downloaded_images/cpe-responsive-grid-4-column.png?itok=jfYgOOpT)
Previous
Clickable objects