Guiding principle: Be consistent.
The grid system gives structure to your page and helps to organize the page content consistently across different devices. We use a 12-column responsive grid system made up of columns, gutters and margins.
All of our components have been built and tested on this grid system.
Columns hold a page’s main body content. One piece of content can be assigned to fill multiple columns. The number of columns assigned to a piece of content determines the width of that piece of content.
Column width is defined using percentages, rather than fixed values, to allow content to flexibly adapt to any screen size. Our 12-column grid always divides the available space into 12 columns, regardless of screen size. In order to make it easier to arrange content for different sized screens, a piece of content can be assigned a different number of columns for each breakpoint range (a range of predetermined screen sizes) at which a screen is viewed, whether it’s a breakpoints for mobile (small), tablet (medium) and desktop (large) screen sizes.
Gutters are the spaces between columns. They help separate content.
Gutter widths are fixed values that do not adjust to screen size. For our 12-column grid, there is always a gutter of 16 pixels on each side of a column.
Margins are the space between the content area and the left and right edges of the screen. To better adapt to the screen, the margin width can change at different breakpoints. For our 12-column grid, we’ve set the margin for small and medium breakpoints to 16 pixels — the same value as our gutters. For desktop screens at large breakpoint sizes, we’ve set the margin to automatically adjust. This keeps the main content area centered on the page on large screens, even after the main content area stops widening.
We’ve modified our grid system to better fit the needs of Ontario.ca. You should also use these breakpoints for transactions and applications that are not built on Ontario.ca:
We have two larger breakpoints, which can be used when styling elements that span the whole page area:
The width of content areas on a page is based on our 12-column grid. Any section of content can be up to 12 columns wide, and can be divided up into smaller containers. To follow best practices, you can choose to implement:
For mobile, most elements will take up the full width of the page regardless of their size on desktop. For example, if an element is four columns wide on desktop, it will still display as full width on mobile. There are some exceptions, such as icons or text inputs with overrides.
Our 12-column grid is a modified version of the grid from Foundation 5. Learn more about how to use the Foundation 5 grid.
Here’s how Material Design describes columns, gutters and margins.
If you have other suggestions or advice or any questions on the grid system, the design system team would love to hear from you.