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.
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
Move blocks up to eleven columns to the right by using classes like large-offset-1 and small-offset-3.
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.
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.
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.
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.