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.

4
4
4
full3
full6
full3
62
68
full2
3
9
full4
full8
65
67
full6
full6

Small Grid

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

2 columns
10 columns
3 columns
9 columns


Medium Grid

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

2 columns
10 columns
3 columns
9 columns

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.

8
8 Nested
8 Nested Again
4
4
4

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.

1
11
1
10, offset 1
1
9, offset 2
1
8, offset 3

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.

3 centered
6 centered large
9 centered small
11 centered

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.

2
10, last in source
3
9, last in source
4
8, last in source
5
7, last in source
6
6, last in source