Skip to Main Content

Grids

Responsive, device-agnostic grids ensure our layout is consistent and scalable across devices with different widths, heights, and resolutions

Our grid structure

At Canada Post, units and measurements follow 16px increments. We use a 12-column grid for maximum flexibility, so that page layouts can be divided easily into 1, 2, 3, 4 and 6 columns.

The Canada Post website currently uses the Foundation framework (version 5.5.1). Foundation’s grid layout is used extensively throughout most, if not all, component templates.

Breakpoints

Our website has 4 major breakpoints. Components behave differently at different breakpoints, but consistently within a breakpoint range.

  • X-large desktop breakpoint: 1441px and above
  • Desktop breakpoint: 1025 - 1440px
  • Tablet breakpoint: 641 - 1024px
  • Mobile breakpoint: 320 - 640px

Leveraging Foundation 5’s framework, targeting these breakpoints with specific CSS is possible by using the built-in media queries in SCSS.


Examples:


@media #{$small-up} { /* target 0 and up */ }
@media #{$small-only} { /* target 0 to 640px only */ }


@media #{$medium-up} { /* target 641px and up */ }
@media #{$medium-only} { /* target 641px to 1024px only */ }


@media #{$large-up} { /* target 1025px and up */ }
@media #{$large-only} {/* target 1025px to 1440px only */ }


@media #{$xlarge-up} { /* target 1441px and up */ }
@media #{$xlarge-only} { /* target 1441px to 1920px only */ }


Also check media queries content in Foundation.

Columns
  • Desktop and tablet use a 12-column grid for maximum flexibility
  • Mobile uses a 4-column grid

Components are measured from the start of a column to the end of a column, and never end on a gutter. Gutters between columns have 16px on the inside and outside of each column.


You can target specific breakpoints to have a certain amount of columns with built-in CSS classes.


  • large-12 = 12 columns for large breakpoint (desktop)
  • medium-6 = 6 columns for medium breakpoint (tablet)
  • small-3 = 3 columns for small breakpoint (mobile)

Also check grid content in Foundation.

Grid offset

There must be white space between the edges of the browser window and the content within a grid. Here are the specifics:


  • Desktop offset: 136px (120px offset + 16px gutter)
  • Tablet offset: 52px (36px offset + 16px gutter)
  • Mobile offset: 16px offset

Examples of the grid offset CSS style rules (padding and margin) are defined in:


  • \website-style-guide\styleguide-components\src\main\webapp\app\cpc\scss\base\_base.scss
  • \website-style-guide\styleguide-components\src\main\webapp\app\cpc\scss\base\_grid.scss

Special cases for gutter rules are defined in:


  • \website-style-guide\styleguide-components\src\main\webapp\app\cpc\scss\base\_full-page-width.scss
Desktop grid
Tablet grid
Mobile grid

Percentage-based scaling

Components scale (change from desktop size to tablet and mobile size) based on percentages. They’re not hard-wired to a fixed width. This ensures that components won’t break when they’re scaled to different screen sizes. For example, a content component that's 50% width in desktop, will span to 100% width in mobile.

Nested grids

A nested grid sits inside a larger grid framework. It can be divided into units of 12 and contain a gutter of 32px. For example, modal windows contain a nested 12-column grid within the overall website grid.

Also check nested grid content in Foundation.