Create powerful multi-device layouts quickly and easily with the default 12-column, nest-able Foundation 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.
**Foundation is mobile-first**. Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary.
HTML
{{> examples_grid_basic}}
Rendered HTML
{{> examples_grid_rendered}}
***
### Small Grid
Small grids expand to large screens easier than large grids cram into small screens.
HTML
{{> examples_grid_small}}
Rendered HTML
{{> examples_grid_small_rendered}}
***
### Medium Grid
Medium sized screens will inherit styles from small, unless you specify a different layout, using the medium grid classes.
{{> examples_grid_medium}}
Rendered HTML
{{> examples_grid_medium_rendered}}
***
Advanced
You can nest the grids indefinitely, though at a certain point it will get absurd.
HTML
{{> examples_grid_nested}}
Rendered HTML
{{> examples_grid_nested_rendered}}
***
### Offsets
Move blocks up to 11 columns to the right by using classes like `.large-offset-1` and `.small-offset-3`.
HTML
{{> examples_grid_offsets}}
Rendered HTML
{{> examples_grid_offsets_rendered}}
***
### Incomplete Rows
In order to work around browsers' different rounding behaviors, 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 a class of `end` in order to override that behavior.
HTML
{{> examples_grid_end}}
Rendered HTML
{{> examples_grid_end_rendered}}
***
### 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`.
HTML
{{> examples_grid_centered}}
Rendered HTML
{{> examples_grid_centered_rendered}}
***
### 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.
HTML
{{> examples_grid_source}}
Rendered HTML
{{> examples_grid_source_rendered}}
***
## Customize with Sass
Customizing the grid is easy with the Sass variables provided in the `_settings.scss` file.
SCSS
{{> examples_grid_variables}}
Basic
You can use the `grid-row()` and `grid-column()` mixins to create your own rows and columns with semantic markup, like so: