Content that isn't visually organized can overwhelm users and make it more difficult to scan a page. If users can't find the information they're looking for easily, they may leave the page.

Grids support proper spacing and alignment of content to create a clean user flow and reduce visual clutter to help users visually understand the content structure and improve scannability. This assist users with finding information quickly.

Component data

Component resources:
SCSS files | coc-card-item.js

Functional grouping: Structure and layout


Configure: select the dropdowns below to display the variety of options that a grid supports.



Responsive preview

Usability best practices

The grid system is incredibly flexible. It has 12 columns available per row, allowing one to create different combinations of elements that span any number of columns.

The grid system supports six responsive breakpoints which allows the granuality of determining how each column or combination of columns behaves at each breakpoint. On mobile screens such as tablets and smart phones, grid columns automatically stack due to limited screen space.

Grids can be nested within each other to create even more dynamic layouts. They can also be used within other components such as accordionscontent blocks (without image), tabs and background image blocks.

Consider using a grid to:

  • organize body text and non-text content on a page
  • create visual hierarchy and prominence of information
  • shorten scrolling and the overall length of your page on desktop screens
  • design unique and blended layouts by combining various column widths per row

Usage examples:

  • creating different column widths within your content
  • placing non-text items next to corresponding text
  • resize different elements so they fill the space more equally
Grid variations and features
Variation name Unique features
  • can be set to fill 100% container width
  • can max out at 1200px width on larger screens
  • gives extra control over page layouts
  • gives option to determine how column(s) or combination of columns behave at 3 middle breakpoints
Single narrow
  • width is set to a fixed percentage of the size of a content area
  • on large screens it displays as a narrow column with extra padding on either side
  • on screens smaller than 768px, it goes full width


Ensure content is easily scannable with sufficient spacing inbetween elements.

Choose an appropriate amount of columns so users are not overwhelmed by the amount of information in a single row.

Use whole numbers to set up the column sizes i.e. 4  vs. 4.5.


Do not nest more than three grids within each other. This can have unintended consequences as columns break across different breakpoints.

Do not use too many different column sizes on one page. This can be visually confusing for users.