Corresponding Filename: grid-basic

You'll feel at home in our neighborhood

Grid

Grid Basic

Start by adding an element with a class of .row. This will create a horizontal block to contain vertical columns. Then add elements 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.

Foundation is mobile-first. Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary.

References

small-2 large-4 columns

small-4 large-4 columns

small-6 large-4 columns

large-3 columns

large-6 columns

large-3 columns

small-6 large-2 columns

small-6 large-8 columns

small-12 large-2 columns

small-3 columns

small-9 columns

large-4 columns

large-8 columns

small-6 large-5 columns

small-6 large-7 columns

large-6 columns

Spanning a big space of 9 columns. No matter how big or medium my page gets, there will always be 2 columns, divided up this way.

This is 8 medium columns.

The right side is 4 medium columns wide.

These columns are two equal sizes.

These columns are two equal sizes.

This is one really big column that goes all the way across the page. We have lots of room to talk about all kinds of things in a space this big.