The CAP grid is based on Foundation Grid. Start by adding a div with a class of row. This will create a horizontal block to contain vertical columns. Then add divs with a class of columns within that row. Specify the widths of each column with the small-#, medium-#, and large-# classes.

Mobile first
The grid is mobile first. Code for small screens first, and larger devices will inherit those styles. Customise for larger screens as necessary. For example including small-6 will mean the div is six columns wide on all screen sizes. Using large-6 will mean the div is six columns wide on large screens, but will switch to twelve columns on smaller devices unless otherwise specified

Offset
Move blocks up to eleven columns to the right by using classes like large-offset-1 and small-offset-3.

Source ordering
You can also shift the order of the columns between the breakpoints if you need things to appear in a different order based on screen size. Prefix push/pull with the size of the device you want to apply the styles to.

Collapsing
The collapse class will remove the padding from between each of the columns. Often you'll want to collpase the the left and right edge padding but keep the padding between the columns. To do this use both collapse and medium-collapse-outer.

Centering
Center your columns by adding a class of small-centered to your column. Large will inherit small centering by default, but you can also center solely on large by applying a large-centered class. To uncenter on large screens use large-uncentered.

Last column
The grid will float the last column in a row to the right so the edge aligns. If your row doesn't have a count that adds up to twelve columns, you can tag the last column with a class of end in order to override that behavior.

<div class="row">
    <div class="medium-7 large-6 columns">
        <p>Something in here</p>
    </div>
    <div class="medium-5 large-6 columns">
        <p>Something else here</p>
    </div>
</div>

• large-# columns
• medium-# columns
• small-# columns
• large-offset-#
• medium-offset-#
• small-offset-#
• large-push-#
• large-pull-#
• medium-push-#
• medium-pull-#
• small-push-#
• small-pull-#
• collapse
• large-collapse-outer
• medium-collapse-outer
• small-collapse-outer
• centered
• end

Green font
Steel font
Cyan font
Blue font
Pink font
Orange font

Slab font
Round font
Hand font

Uppercase font
Italic font
Bold font