--- title: Grid ---

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:

SCSS

{{#markdown}} ```scss .custom-row-class { @include grid-row(); .custom-column-class { @include grid-column(12); } } ``` {{/markdown}}

HTML

{{> examples_grid_row_mixin}}

Advanced

You can further customize your grid columns using the provided options in the `grid-column()` mixin: ##### Row Mixin Options

SCSS

{{> examples_grid_row_options}} ##### Column Mixin Options

SCSS

{{> examples_grid_column_mixin}} *** ##### Sass Errors? If the default "foundation" import was commented out, then make sure you import this file:

SCSS

{{#markdown}} ```scss @import "foundation/components/grid"; ``` {{/markdown}}