Grid
Create powerful multi-device layouts quickly and easily with the 12-column, nestable grid. If you're familiar with grid systems, you'll feel right at home. If not, you'll learn quickly.
Basic
Start by adding an element with a class of row. This will create a horizontal block to contain vertical columns. Then add divs with a column class within that row. You can use
column or columns - the only difference is grammar. Specify the widths of each column with the small-#, medium-#, and large-# classes.
Suit is mobile-first. Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary.
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.
Advanced
The grid allows for nesting down as far as you'd like, though at a certain point it will get absurd. You can use this nesting to create quite complex layouts, as well as some other tricks like form layouts or visual elements.
Offsets
Offsets allow you to create additional space between columns in a row. Like the rest of the grid, they're nestable. You can use classes like .large-offset-1 and .small-offset-3 to manipulate your column positions in different ways. You can offset up to 11 since you wouldn't ever offset a full-width column.
Incomplete Rows
In order to work around browsers' different rounding behaviors, Suit 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 12 columns, you can tag the last column with a class of end in order to override that behavior.
<div class="row">
<div class="medium-3 columns">3</div>
<div class="medium-3 columns">3</div>
<div class="medium-3 columns">3</div>
</div>
<div class="row">
<div class="medium-3 columns">3</div>
<div class="medium-3 columns">3</div>
<div class="medium-3 columns end">3 end</div>
</div>Centered Columns
Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself. This is accomplished by adding a class of large-centered or small-centered depending on which breakpoint you want the columns to center on. Small versions will carry through all breakpoints if not overridden by a large version. You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered.
Source Ordering
Using these source ordering classes, you can shift columns around between our breakpoints. This means you can have a sub-nav on the left on large displays, but go below on small ones. .push-# is the syntax you'll use.