--- title: Grid layout: component.html ---

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 removes the gutter at the large breakpoint and then adds the gutter to columns at medium and small.

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:

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}}