The Grid

Create powerful multi-device layouts quickly and easily with the default 12-column, nestable Foundation grid. If you're familiar with grid systems, you'll feel right at home. If not, you'll learn quickly.

Basics

Start by adding an element with a class of .row. This will create a horizontal block to contain vertical columns. Then add elements with a .column class within that row. 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.

Watch this part in video

By default .column has an alias .columns (see the $grid-column-alias option) —the only difference is grammar.

Disabling the alias can reduce the Foundation CSS file size from 3 to 5%. It is recommended if the alias is not used.

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

full3

full6

full3

full2

full4

full8

full6

Small Grids

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

Watch this part in video

<div class="row">
  <div class="small-2 columns">2 <span class="hide-for-small-only">columns</span></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>

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.

Watch this part in video

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

2 columns

10 columns

3 columns

9 columns

Advanced

Combined Column/Row

If you have just a single column, you can save some markup by combining the .row and .column classes together on the same element. You can still nest more grids inside this container like usual.

Column rows can use sizing classes like .small-8, but only when used as a top-level container—not when nested inside another row.

<div class="column row">
  Row column
</div>

Row column

Fluid Row

Normally, a row is always 1200 pixels wide. Make a row completely fluid by adding the .expanded class.

Watch this part in video

<div class="expanded row">
</div>

Nesting

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

Watch this part in video

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

8 Nested

8 Nested Again

Offsets

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

Watch this part in video

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

10, offset 1

9, offset 2

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. Alternatively, you can set the $grid-column-align-edge variable to false to turn off this behavior entirely.

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

3 end

Gutters

Responsive gutters were added in Foundation 6.1.

The grid gutter—the space between two columns in a row, and the space between the edge of a grid and the edge of the page—is responsive, and becomes wider on larger screens.

Breakpoint	Gutter Size
`small`	20px
`medium`	30px

If you're using the Sass version of Foundation, you can change these defaults by editing the $grid-column-gutter variable:

$grid-column-gutter: (
  small: 20px,
  medium: 30px,
);

To add more gutter definitions, add new lines to the map. The breakpoint names used here must match a breakpoint name in your project's $breakpoints map.

Or, if you prefer using one gutter size on every breakpoint, just use a single number.

$grid-column-gutter: 30px;

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.

<div class="row medium-uncollapse large-collapse">
  <div class="small-6 columns">
    Removes gutter at large media query
  </div>
  <div class="small-6 columns">
    Removes gutter at large media query
  </div>
</div>

Scale the browser down to a medium size to see the difference.

On a small screen, I have gutters!

On a medium screen, I have gutters!

On a large screen, I have no gutters!

On a small screen, I have gutters!

On a medium screen, I have gutters!

On a large screen, I have no gutters!

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.

Watch this part in video

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

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 the number 0 instead to reset a push/pull, such as .medium-push-0 or .large-pull-0.

Watch this part in video

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

2, last

3, last

4, last

5, last

6, last

Block Grids

Block grids are a shorthand way to create equally-sized columns. Add a class of the format .[size]-up-[n] to change the number of columns within the row. By default, the max number of columns you can use with block grid are 8. Adding the .column-block class to columns will apply a bottom margin equal to the width of gutters.

Watch this part in video

<div class="row small-up-2 medium-up-3 large-up-4">
  <div class="column column-block">
    <img src="//placehold.it/600x600" class="thumbnail" alt="">
  </div>
  <div class="column column-block">
    <img src="//placehold.it/600x600" class="thumbnail" alt="">
  </div>
  <div class="column column-block">
    <img src="//placehold.it/600x600" class="thumbnail" alt="">
  </div>
  <div class="column column-block">
    <img src="//placehold.it/600x600" class="thumbnail" alt="">
  </div>
  <div class="column column-block">
    <img src="//placehold.it/600x600" class="thumbnail" alt="">
  </div>
  <div class="column column-block">
    <img src="//placehold.it/600x600" class="thumbnail" alt="">
  </div>
</div>

Building Semantically

Our grid CSS is generated with a powerful set of Sass mixins, which you can use in your own code to build a semantic grid.

Rows

Use the grid-row() mixin to create a row.

.container {
  @include grid-row;
}

Columns

Use the grid-column() mixin to create a column. There are a number of ways to define the width of the column.

.main-content {
  // Use the full column count (100%)
  @include grid-column;

  // Use a column count (33%);
  @include grid-column(4);

  // Use a percentage (15%)
  @include grid-column(15%);

  // Use a custom fraction (20%)
  @include grid-column(1 of 5);
}

The grid column calculator can also be accessed as a function. This gives you the percentage value, without any of the grid column CSS.

.main-content {
  width: grid-column(1 of 7);
}

To center a column semantically. Use ´grid-column-position(center);´.

.centered-column {
  @include grid-column-position(center);
}

Multiple Grids

By default, all grids use the number of columns set by the $grid-column-count variable. However, this can be selectively overridden within an instance of a row.

In this example, the grid is 16 columns instead of the normal 12. Any references to column math inside the mixin will use the new column count.

.container {
  @include grid-row(16) {
    .main-content {
      // 11/16 = 68.75%
      @include grid-column(11);
    }

    .sidebar {
      // 5/16 = 31.25%
      @include grid-column(5);
    }
  }
}

You can also temporarily change the grid context without outputting any row CSS, by using the grid-context() mixin.

@include grid-context(7) {
  .sidebar {
    @include grid-column(4);
  }
}

Every other grid feature, from sizing to offsets to source ordering, can also be accessed with a mixin. Pair them with the breakpoint() mixin to make your grid responsive.

Refer to the Sass documentation below to learn how each mixin works.

.main-content {
  // The mixins have shorthands, too!
  @include grid-col;

  @include breakpoint(medium) {
    // Changes size only
    @include grid-col-size(8);

    // Changes position only
    @include grid-col-pos(4);
  }
}

Custom Block Grid

Use the grid-layout() mixin to create your own block grid. By default the mixin takes 3 parameters:

Number of columns
The child element selector
- An optional padding value

The padding value can be set to $grid-column-gutter to use the values from that map. This will then generate different paddings at different breakpoints. Alternatively supply a numeric value (without a unit type) to output a static rem value.

Here's an example:

.gallery {
  @include grid-layout(3, '.gallery-item', $grid-column-gutter);
}

That outputs this CSS:

.gallery > .gallery-item {
  width: 33.33333%;
  float: left;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

@media screen and (min-width: 40em) {
  .gallery > .gallery-item {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}

.gallery > .gallery-item:nth-of-type(1n) {
  clear: none;
}

.gallery > .gallery-item:nth-of-type(3n+1) {
  clear: both;
}

.gallery > .gallery-item:last-child {
  float: left;
}

Sass Reference

Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

Name	Type	Default Value	Description
`$grid-row-width`	Number	`$global-width`	The maximum width of a row.
`$grid-column-count`	Number	`12`	The default column count of a grid. Changing this value affects the logic of the grid mixins, and the number of CSS classes output.
`$grid-column-gutter`	Map or Length	`small: 20px medium: 30px`	The amount of space between columns at different screen sizes. To use just one size, set the variable to a number instead of a map.
`$grid-column-align-edge`	Boolean	`true`	If `true`, the last column in a row will align to the opposite edge of the row.
`$grid-column-alias`	String	`'columns'`	Selector used for an alias of column (with @extend). If `false`, no alias is created.
`$block-grid-max`	Number	`8`	The highest number of `.x-up` classes available when using the block grid CSS.

Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

grid-column

@include grid-column($columns, $gutters);

Creates a grid column.

Parameter	Type	Default Value	Description
`$columns`	Mixed	`$grid-column-count`	Width of the column. Refer to the `grid-column()` function to see possible values.
`$gutters`	Mixed	`$grid-column-gutter`	Spacing between columns. Refer to the `grid-column-gutter()` function to see possible values.

grid-column-row

@include grid-column-row($gutters);

Creates a grid column row. This is the equivalent of adding .row and .column to the same element.

Aliases: grid-col-row()

Parameter	Type	Default Value	Description
`$gutters`	Mixed	`$grid-column-gutter`	Width of the gutters on either side of the column row. Refer to the `grid-column-gutter()` function to see possible values.

grid-column-gutter

@include grid-column-gutter($gutter, $gutters);

Set the gutters on a column

Parameter Type Default Value Description

Parameter	Type	Default Value	Description
`$gutter`	Number or Keyword	`auto`	Spacing between columns, accepts multiple values: A single value will make the gutter that exact size. A breakpoint name will make the gutter the corresponding size in the $gutters map. "auto" will make the gutter responsive, using the $gutters map values.
`$gutters`	Number or Map	`$grid-column-gutter`	Gutter map or single value to use. Responsive gutter settings by default.

$gutter

Number or Keyword

auto

Spacing between columns, accepts multiple values:

A single value will make the gutter that exact size.
A breakpoint name will make the gutter the corresponding size in the $gutters map.
"auto" will make the gutter responsive, using the $gutters map values.

$gutters

Number or Map

$grid-column-gutter

Gutter map or single value to use. Responsive gutter settings by default.

grid-column-collapse

@include grid-column-collapse;

Collapse the gutters on a column by removing the padding. Note: only use this mixin within a breakpoint. To collapse a column's gutters on all screen sizes, use the $gutter parameter of the grid-column() mixin instead.

Aliases: grid-col-collapse()

grid-column-uncollapse

@include grid-column-uncollapse($gutter);

Un-collapse the gutters on a column by re-adding the padding.

Aliases: grid-col-uncollapse()

Parameter	Type	Default Value	Description
`$gutter`	Number	`$grid-column-gutter`	Spacing between columns.

grid-column-margin

@include grid-column-margin($margin, $margins);

Sets bottom margin on grid columns to match gutters

Parameter Type Default Value Description

Parameter	Type	Default Value	Description
`$margin`	Number or Keyword	`auto`	The bottom margin on grid columns, accepts multiple values: A single value will make the margin that exact size. A breakpoint name will make the margin the corresponding size in the $margins map. "auto" will make the margin responsive, using the $margins map values.
`$margins`	Number or Map	`$grid-column-gutter`	Map or single value to use. Responsive gutter settings by default.

$margin

Number or Keyword

auto

The bottom margin on grid columns, accepts multiple values:

A single value will make the margin that exact size.
A breakpoint name will make the margin the corresponding size in the $margins map.
"auto" will make the margin responsive, using the $margins map values.

$margins

Number or Map

$grid-column-gutter

Map or single value to use. Responsive gutter settings by default.

grid-layout

@include grid-layout($n, $selector, $gutter);

Sizes child elements so that $n number of items appear on each row.

Parameter Type Default Value Description

Parameter	Type	Default Value	Description
`$n`	Number	`None`	Number of elements to display per row.
`$selector`	String	`'.column'`	Selector(s) to use for child elements.
`$gutter`	Number or List	`None`	The gutter to apply to child elements. Accepts multiple values: $grid-column-gutter will use the values in the $grid-column-gutter map, including breakpoint sizes. A fixed numeric value will apply this gutter to all breakpoints.

$n

Number

None

Number of elements to display per row.

$selector

String

'.column'

Selector(s) to use for child elements.

$gutter

Number or List

None

The gutter to apply to child elements. Accepts multiple values:

$grid-column-gutter will use the values in the $grid-column-gutter map, including breakpoint sizes.
A fixed numeric value will apply this gutter to all breakpoints.

grid-layout-center-last

@include grid-layout-center-last($n);

Adds extra CSS to block grid children so the last items in the row center automatically. Apply this to the columns, not the row.

Parameter	Type	Default Value	Description
`$n`	Number	`None`	Number of items that appear in each row.

grid-column-position

@include grid-column-position($position);

Reposition a column.

Aliases: grid-col-pos()

Parameter	Type	Default Value	Description
`$position`	Number or Keyword	`None`	Direction and amount to move. The column will move equal to the width of the column count specified. A positive number will push the column to the right, while a negative number will pull it to the left. Set to center to center the column.

grid-column-unposition

@include grid-column-unposition;

Reset a position definition.

Aliases: grid-col-unpos()

grid-column-offset

@include grid-column-offset($n);

Offsets a column to the right by $n columns.

Aliases: grid-col-off()

Parameter	Type	Default Value	Description
`$n`	Number or List	`None`	Width to offset by. You can pass in any value accepted by the `grid-column()` mixin, such as `6`, `50%`, or `1 of 2`.

grid-column-end

@include grid-column-end;

Disable the default behavior of the last column in a row aligning to the opposite edge.

Aliases: grid-col-end()

grid-context

@include grid-context($columns, $root) { }

Change the behavior of columns defined inside this mixin to use a different column count.

Parameter	Type	Default Value	Description
`$columns`	Number	`None`	Number of columns to use.
`$root`	Boolean	`false`	If `false`, selectors inside this mixin will nest inside the parent selector. If `true`, selectors will not nest.

grid-row

@include grid-row($columns, $behavior, $size, $cf, $gutters) { }

Creates a grid row.

Parameter	Type	Default Value	Description
`$columns`	Number	`null`	Column count for this row. `null` will use the default column count.
`$behavior`	Keywords	`null`	Modifications to the default grid styles. `nest` indicates the row will be placed inside another row. `collapse` indicates that the columns inside this row will not have padding. `nest collapse` combines both behaviors.
`$size`	Keyword or Number	`$grid-row-width`	Maximum size of the row. Set to `expand` to make the row taking the full width.
`$cf`	Boolean	`true`	Whether or not to include a clearfix.
`$gutters`	Number or Map	`$grid-column-gutter`	Gutter map or single value to use when inverting margins. Responsive gutter settings by default.

grid-row-nest

@include grid-row-nest($gutters);

Inverts the margins of a row to nest it inside of a column.

Parameter	Type	Default Value	Description
`$gutters`	Number or Map	`$grid-column-gutter`	Gutter map or single value to use when inverting margins. Responsive gutter settings by default.

grid-row-size

@include grid-row-size($size);

Set a grid row size

Parameter	Type	Default Value	Description
`$size`	Keyword or Number	`$grid-row-width`	Maximum size of the row. Set to `expand` to make the row taking the full width.

grid-column-size

@include grid-column-size($width);

Set the width of a grid column.

Aliases: grid-col-size()

Parameter	Type	Default Value	Description
`$width`	Number or List	`$grid-column-count`	Width to make the column. You can pass in any value accepted by the `grid-column()` function, such as `6`, `50%`, or `1 of 2`.

vertical-rhythm

@include vertical-rhythm($multiplier, $property, $increment);

Outputs a margin-top or padding-top CSS property for vertical spacing

Parameter	Type	Default Value	Description
`$multiplier`	Number	`1rem`	The number of times to multiply the base increment
`$property`	String	`'margin'`	Designates the CSS property to use for spacing: either `margin` or `padding`
`$increment`	Number	`1rem`	The base increment to be multiplied

vertical-rhythm-classes

@include vertical-rhythm-classes($class, $count);

Generates vertical spacing helper classes (and extends) in increments a given number of times Classes have !important to override CSS

Parameter	Type	Default Value	Description
`$class`	String	`'vertical-'`	The base of the class name for each increment
`$count`	Number	`12`	The total number of classes (increments) to generate

Functions

grid-column

grid-column($columns)

Calculates the width of a column based on a number of factors.

Parameter Type Default Value Description

Parameter	Type	Default Value	Description
`$columns`	Number or List	`None`	Width of the column. Accepts multiple values: A percentage value will make the column that exact size. A single digit will make the column span that number of columns wide, taking into account the column count of the parent row. A list of the format "x of y" (without quotes) will make a column that is x columns wide, assuming y total columns for the parent.

$columns

Number or List

None

Width of the column. Accepts multiple values:

A percentage value will make the column that exact size.
A single digit will make the column span that number of columns wide, taking into account the column count of the parent row.
A list of the format "x of y" (without quotes) will make a column that is x columns wide, assuming y total columns for the parent.