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.