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}}
***
### Collapse/Uncollapse Rows
The `collapse` class lets you remove column gutters (padding).
There are times when you won't want each media query to be collapsed or uncollapsed. In this case, use the media query size you want and collapse or uncollapse and add that to your `row` element. Example shows no gutter at small media size and then adds the gutter to columns at medium.
HTML
{{> examples_grid_row_collapse}}
Rendered HTML
{{> examples_grid_row_collapse_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: