Grid

Small Grid

Small grids expand to large screens easier than large grids cram into small screens.

Medium Grid

Medium sized screens will inherit styles from small, unless you specify a different layout, using the medium grid classes.

Offsets

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

Incomplete Rows

In order to work around browsers' different rounding behaviors, we 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 12 columns, you can tag the last column with a class of end in order to override that behavior.

Centered Columns

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.

Source Ordering

Using these source ordering classes, you can shift columns around between our breakpoints. This means if you place sub-navigation below main content on small displays, you have the option to position the sub-navigation on either the left or right of the page for large displays. Prefix push/pull with the size of the device you want to apply the styles to medium-push-#, large-push-# is the syntax you'll use. Use large-reset-order to reset pushed or pulled columns to their original position on large screens.

Block Grid

Basic

Use a simple small-block-grid-# class to code up the block grid and specify the number of items in a row.

• 
• 
• 

Block Grid

Advanced

Use additional classes to specify a different number of items in a row for each screen size.

• 
• 
• 
• 
• 
• 

If you use the small-block-grid only, the grid will keep its spacing and configuration no matter the screen size. If you use large-block-grid only, the list items will stack on top of each other for small devices. If you use both of those classes combined, you can control the configuration and layout separately for each breakpoint.