Grid

The grid component is a wrapper element that forces its inner content into a column/row grid.

Structure & styles

The grid component can be used by wrapping any content in a .cwf-grid element. On mobile devices up to a viewport width of 1023px, all grids will be one column with its content vertically stacking.

Wrapping element

Automatic grid

Wrap any content in a .cwf-grid element, and it will be configured to display in an evenly-sized column grid (up-to 5 columns).

Explicit grid

Add a .cwf-grid--[n]-columns class to a wrapping .cwf-grid element to restrict the number of evenly-sized columns to [n], where [n] is a digit from 2 through 5.

Grid items

Column spanning

Items within a grid can be made to span multiple columns by adding a .cwf-grid__column--span-[n] class to them, where [n] is either a digit from 2 through 5 (implying the number of columns to span) or all (spanning the item across all columns). Keep in mind that if you make an item span-all in an automatic grid, it will force the number of columns to be 5.

Column start

Items within a grid can be made to start at a specific column by adding a .cwf-grid__column--start-[n], where [n] is a digit from 1 through 4. Keep in mind that if the targeted column is available in the existing row, it will not push the item to the next row.

Page layout

The 3-column page layout used on every page of a Compass website is an extension (or modifier) of the grid component. This grid variation utilizes named columns, optional 320px wide side columns for sub-navs and sidebar content, and a main, middle column that takes up as much space as possible up-to 1080px. This grid variation should only be used within the scope of the entire page and not within main content.

Javascript

There is no grid-specific javascript included.

T4 implementation

The grid component is not tied to a specific T4 content type. All grid component styles are included in the Compass T4 page layout CSS and is used to generate home and inner webpages of a T4 site.

Examples

Automatic grid

Explicit 2-column grid

Column spanning (in an explicit 5-column grid)

Column start (in an explicit 5-column grid)

All cards in this example are made to span 2 columns; This is because if the targeted column is available in the existing row, it will not push the item to the next row.