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

<div class="row"> <div class="small-2 large-4 columns">...</div> <div class="small-4 large-4 columns">...</div> <div class="small-6 large-4 columns">...</div> </div> <div class="row"> <div class="large-3 columns">...</div> <div class="large-6 columns">...</div> <div class="large-3 columns">...</div> </div> <div class="row"> <div class="small-6 large-2 columns">...</div> <div class="small-6 large-8 columns">...</div> <div class="small-12 large-2 columns">...</div> </div> <div class="row"> <div class="small-3 columns">...</div> <div class="small-9 columns">...</div> </div> <div class="row"> <div class="large-4 columns">...</div> <div class="large-8 columns">...</div> </div> <div class="row"> <div class="small-6 large-5 columns">...</div> <div class="small-6 large-7 columns">...</div> </div> <div class="row"> <div class="large-6 columns">...</div> <div class="large-6 columns">...</div> </div>

Rendered HTML

24
4
64
full3
full6
full3
62
68
full2
3
9
full4
full8
65
67
full6
full6

Small Grid

Small grids expand to large screens easier than large grids cram into small screens.

HTML

<div class="row"> <div class="small-2 columns">2 columns</div> <div class="small-10 columns">10 columns</div> </div> <div class="row"> <div class="small-3 columns">3 columns</div> <div class="small-9 columns">9 columns</div> </div>

Rendered HTML

2 columns
10 columns
3 columns
9 columns

Medium Grid

Medium sized screens will inherit styles from small, unless you specify a different layout, using the medium grid classes.

<div class="row"> <div class="medium-2 columns">2 columns</div> <div class="medium-10 columns">10 columns</div> </div> <div class="row"> <div class="medium-3 columns">3 columns</div> <div class="medium-9 columns">9 columns</div> </div>

Rendered HTML

2 columns
10 columns
3 columns
9 columns

Advanced

You can nest the grids indefinitely, though at a certain point it will get absurd.

HTML

<div class="row"> <div class="small-8 columns">8 <div class="row"> <div class="small-8 columns">8 Nested <div class="row"> <div class="small-8 columns">8 Nested Again</div> <div class="small-4 columns">4</div> </div> </div> <div class="small-4 columns">4</div> </div> </div> <div class="small-4 columns">4</div> </div>

Rendered HTML

8
8 Nested
8 Nested Again
4
4
4

Offsets

Move blocks up to 11 columns to the right by using classes like .large-offset-1 and .small-offset-3.

HTML

<div class="row"> <div class="large-1 columns">1</div> <div class="large-11 columns">11</div> </div> <div class="row"> <div class="large-1 columns">1</div> <div class="large-10 large-offset-1 columns">10, offset 1</div> </div> <div class="row"> <div class="large-1 columns">1</div> <div class="large-9 large-offset-2 columns">9, offset 2</div> </div> <div class="row"> <div class="large-1 columns">1</div> <div class="large-8 large-offset-3 columns">8, offset 3</div> </div>

Rendered HTML

1
11
1
10, offset 1
1
9, offset 2
1
8, offset 3

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

<div class="row"> <div class="medium-3 columns">3</div> <div class="medium-3 columns">3</div> <div class="medium-3 columns">3</div> </div> <div class="row"> <div class="medium-3 columns">3</div> <div class="medium-3 columns">3</div> <div class="medium-3 columns end">3 end</div> </div>

Rendered HTML

3
3
3
3
3
3 end

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

<div class="row"> <div class="small-3 small-centered columns">3 centered</div> </div> <div class="row"> <div class="small-6 large-centered columns">6 centered</div> </div> <div class="row"> <div class="small-9 small-centered large-uncentered columns">9 centered</div> </div> <div class="row"> <div class="small-11 small-centered columns">11 centered</div> </div>

Rendered HTML

3 centered
6 centered, large
9 centered small
11 centered

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

<div class="row"> <div class="small-10 small-push-2 columns">10</div> <div class="small-2 small-pull-10 columns">2, last</div> </div> <div class="row"> <div class="large-9 large-push-3 columns">9</div> <div class="large-3 large-pull-9 columns">3, last</div> </div> <div class="row"> <div class="large-8 large-push-4 columns">8</div> <div class="large-4 large-pull-8 columns">4, last</div> </div> <div class="row"> <div class="small-5 small-push-7 medium-7 medium-push-5 columns">7</div> <div class="small-7 small-pull-5 medium-5 medium-pull-7 columns">5, last</div> </div> <div class="row"> <div class="medium-6 medium-push-6 columns">6</div> <div class="medium-6 medium-pull-6 columns">6, last</div> </div>

Rendered HTML

10
2, last
9
3, last
8
4, last
7
5, last
6
6, last

Customize with Sass

Customizing the grid is easy with the Sass variables provided in the _settings.scss file.

SCSS

$row-width: rem-calc(1000); $column-gutter: rem-calc(30); $total-columns: 12 ;

Basic

You can use the grid-row() and grid-column() mixins to create your own rows and columns with semantic markup, like so:

SCSS

.custom-row-class { @include grid-row(); .custom-column-class { @include grid-column(12); } }

HTML

<div class="your-row-class-name"> <div class="your-column-class-name"> <!-- Your content goes here --> </div> </div>

Advanced

You can further customize your grid columns using the provided options in the grid-column() mixin:

Row Mixin Options

SCSS

.your-class-name { @include grid-row($behavior: nest) // Other options include collapse and nest-collapse. // Default $behavior value is false }
Column Mixin Options

SCSS

.custom-grid-class { @include grid-column( // Control the number of columns $columns:4, // Specify whether or not this is the last column in the row $last-column:true, // Choose whether or not to center this column $center:true, // Choose the number of columns to offset this element by $offset:3, // Specify how many columns to push this element past $push:3, // Specify how many columns to pull this element past $pull:9, // Set to true to remove column padding $collapse:true, // Specify the float direction $float:right ); }

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

@import "foundation/components/grid";
Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »