Grid

Basic Examples

.four.columns

.three.columns

.six.columns

.three.columns

.two.columns

.eight.columns

.two.columns

.one

.eleven.columns

.two.columns

.ten.columns

.three.columns

.nine.columns

.four.columns

.eight.columns

.five.columns

.seven.columns

.six.columns

.seven.columns

.five.columns

.eight.columns

.four.columns

.nine.columns

.three.columns

.ten.columns

.two.columns

.eleven.columns

.one

.twelve.columns

Note: In order to work around browsers' different rounding behaviours, Foundation 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 class="end" in order to override that behaviour.

This won't work by default in IE8 since it doesn't support :after but you can simply add a new class to override this if you run into this problem.

.four.columns

.four.columns.end

Nesting Support

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.

.twelve

.four

Offsets

Offsets allow you to create additional space between columns in a row. The offsets run from offset-by-one all the way up to offset-by-eleven. Like the rest of the grid, they're nestable.

.one

.eleven.columns

.one

.ten.columns.offset-by-one

.one

.nine.columns.offset-by-two

.one

.eight.columns.offset-by-three

.seven.columns.offset-by-five

.six.columns.offset-by-six

.five.columns.offset-by-seven

.four.columns.offset-by-eight

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 a convenient way to make sure a block is centered, even if you change the number of columns it contains. Note: There cannot be any other column blocks in the row for this to work.

.one.columns.centered

.two.columns.centered

.three.columns.centered

.four.columns.centered

.five.columns.centered

.six.columns.centered

.seven.columns.centered

.eight.columns.centered

.nine.columns.centered

.ten.columns.centered

.eleven.columns.centered

.twelve.columns.centered

Source Ordering

Sometimes within the grid you want the order of your markup to not necessarily be the same as the order items are flowed into the grid. Using our source ordering classes, .push-#/pull-#, you can shift columns around on desktops and tablets. On phones, the grid will still be linearized into the order of the markup.

The syntax supports push and pull for two to ten columns, and is added directly to the columns themselves.

.two.columns

.ten.columns (last)

.three.columns

.nine.columns (last)

.four.columns

.eight.columns (last)

.five.columns

.seven.columns (last)

.six.columns

.six.columns (last)

.seven.columns

.five.columns (last)

.eight.columns

.four.columns (last)

.nine.columns

.three.columns (last)

.ten.columns

.two (last)

Mobile Grid

The grid has two modes of adapting for small displays like phones. The first requires no work at all — the grid will linearize on a small device so your columns stack vertically. This is useful to quickly adapt a desktop layout to a simple scrolling mobile layout. When you're creating your layout you can optionally attach classes that take your existing grid elements and attach them to a four column phone grid.

.three.mobile-one.columns

.nine.mobile-three.columns

.six.mobile-two.columns

.nine.mobile-three.columns

.three.mobile-one.columns