Grid

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

Markup

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.

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.

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.

Examples

Automatic grid

Default callout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a mauris purus. Duis viverra, libero eu laoreet fermentum, nisl urna facilisis neque, eget tempor urna diam nec sem.

Accent callout

Integer pulvinar leo ut tellus tincidunt, vitae maximus erat pretium. Pellentesque dignissim dolor vel nisl vehicula porttitor. Nam pharetra lectus luctus, laoreet massa at, consectetur libero.

Default callout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a mauris purus. Duis viverra, libero eu laoreet fermentum, nisl urna facilisis neque, eget tempor urna diam nec sem.

Accent callout

Integer pulvinar leo ut tellus tincidunt, vitae maximus erat pretium. Pellentesque dignissim dolor vel nisl vehicula porttitor. Nam pharetra lectus luctus, laoreet massa at, consectetur libero.

Explicit 2-column grid

Default callout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a mauris purus. Duis viverra, libero eu laoreet fermentum, nisl urna facilisis neque, eget tempor urna diam nec sem.

Accent callout

Integer pulvinar leo ut tellus tincidunt, vitae maximus erat pretium. Pellentesque dignissim dolor vel nisl vehicula porttitor. Nam pharetra lectus luctus, laoreet massa at, consectetur libero.

Accent callout

Integer pulvinar leo ut tellus tincidunt, vitae maximus erat pretium. Pellentesque dignissim dolor vel nisl vehicula porttitor. Nam pharetra lectus luctus, laoreet massa at, consectetur libero.

Default callout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a mauris purus. Duis viverra, libero eu laoreet fermentum, nisl urna facilisis neque, eget tempor urna diam nec sem.