The grid uses Foundation (6.3.1) flex grid.

Basics

The structure of the flex grid is identical to that of the float grid. Rows use the class `.row`, and columns use the class `.column` (or `.columns`). Basic percentage-based sizing can also be done using the same grid classes you're used to: `.small-6`, `.medium-12`, and so on.

6 columns
6 columns
12/6/4 columns
12/6/8 columns
<div class="row">
  <div class="small-6 columns">6 columns</div>
  <div class="small-6 columns">6 columns</div>
</div>
<div class="row">
  <div class="medium-6 large-4 columns">12/6/4 columns</div>
  <div class="medium-6 large-8 columns">12/6/8 columns</div>
</div>

Advanced sizing

If no sizing class is added to the column, it will simply expand to fill the leftover space. We call this an expand behavior.

4 columns
Whatever's left!
<div class="row">
  <div class="small-4 columns">4 columns</div>
  <div class="columns">Whatever's left!</div>
</div>
Multiple expanding columns will share the leftover space equally.
4 columns
Whatever's left!
Whatever's left!
<div class="row">
  <div class="small-4 columns">4 columns</div>
  <div class="columns">Whatever's left!</div>
  <div class="columns">Whatever's left!</div>
</div>
A column can also be made to shrink, by adding the .shrink class. This means it will only take up the horizontal space its contents need.
Multiple expanding columns will share the leftover space equally.
Shrink!
Expand!
<div class="row">
  <div class="shrink columns">Shrink!</div>
  <div class="columns">Expand!</div>
</div>

Responsive Adjustments

Columns in a flex grid will not wrap if not given an explicit size—this is what allows the magical auto-sizing to work. To make columns stack on smaller screens, add the class `.small-12` manually. To switch back to the expand behavior from a percentage or shrink behavior, use the classes `.medium-expand` or `.large-expand`. In the below example, the columns stack on small screens, and become even-width on large screens.

One
Two
Three
Four
Five
Six
<div class="row">
  <div class="small-12 large-expand columns">One</div>
  <div class="small-12 large-expand columns">Two</div>
  <div class="small-12 large-expand columns">Three</div>
  <div class="small-12 large-expand columns">Four</div>
  <div class="small-12 large-expand columns">Five</div>
  <div class="small-12 large-expand columns">Six</div>
</div>

Automatic Stacking

We have a few shorthand classes for the above behavior. Use the `.[size]-unstack` classes to stack all columns in the row by default, and then unstack them on a larger screen size, making each one equal-width.

One
Two
Three
Four
Five
Six
<div class="row medium-unstack">
  <div class="columns">One</div>
  <div class="columns">Two</div>
  <div class="columns">Three</div>
  <div class="columns">Four</div>
  <div class="columns">Five</div>
  <div class="columns">Six</div>
</div>

Column Alignment

Columns in a flex grid can be aligned across the horizontal or vertical axis of their parent row.

Horizontal Alignment

Columns can be aligned the same way you would align text in a paragraph. By default, all columns align to the left (or the right in RTL), but this can be overridden with by adding the `.align-[dir]` class to the flex row.
Aligned to
the left
Aligned to
the right
Aligned to
the middle
Aligned to
the edges
Aligned to
the space around
<div class="row">
  <div class="column small-4">Aligned to</div>
  <div class="column small-4">the left</div>
</div>
<div class="row align-right">
  <div class="column small-4">Aligned to</div>
  <div class="column small-4">the right</div>
</div>
<div class="row align-center">
  <div class="column small-4">Aligned to</div>
  <div class="column small-4">the middle</div>
</div>
<div class="row align-justify">
  <div class="column small-4">Aligned to</div>
  <div class="column small-4">the edges</div>
</div>
<div class="row align-spaced">
  <div class="column small-4">Aligned to</div>
  <div class="column small-4">the space around</div>
</div>
You might be wondering what the difference between `.align-justify` and `.align-spaced` is. A justified grid (`justify-content: space-between`) evenly distributes the space between each column. The first and last columns pin to the edge of the grid.

A spaced grid (justify-content: space-around) evenly distributes the space around each column. This means there will always be space to the left of the first column, and to the right of the last column.

The horizontal alignment classes are shorthands for the `justify-content` CSS property. Learn more about justify-content. https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
By default, all columns in a flex grid stretch to be equal height. This behavior can be changed with another set of alignment classes.

Your options for vertical alignment are `top`, `middle`, `bottom`, and `stretch`. Note that we use the word middle for vertical alignment, and center for horizontal alignment.

Applying a vertical alignment class to the flex row will affect every column directly inside it.
I'm in the middle!
I am as well, but I have so much text I take up more space! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facere ducimus earum minus, inventore, ratione doloremque deserunt neque perspiciatis accusamus explicabo soluta, quod provident distinctio aliquam omnis? Labore, ullam possimus.
<div class="row align-middle">
  <div class="columns">I'm in the middle!</div>
  <div class="columns">I am as well, but I have so much text I take up more space! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facere ducimus earum minus, inventore, ratione doloremque deserunt neque perspiciatis accusamus explicabo soluta, quod provident distinctio aliquam omnis? Labore, ullam possimus.</div>
</div>

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. The `.is-collapse-child` class removes negative margins from nested row under collapsed parent.

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

Offsets

Offsets work identically to the float grid, by applying `margin-left` to a column.

Offset 2 on large
4 columns
<div class="row">
  <div class="small-4 large-offset-2 columns">Offset 2 on large</div>
  <div class="small-4 columns">4 columns</div>
</div>

Block Grids

To define column widths at the row-level, instead of the individual column level, add the class `.[size]-up-[n]` to a row, where `[n]` is the number of columns to display per row, and `[size]` is the breakpoint at which to apply the effect. A block grid row has the property `align-items: stretch` by default, meaning the columns in each row are equal height. To change this, change the `align-items` property of the row.

1 per row on small
2 per row on medium
3 per row on large
<div class="row small-up-1 medium-up-2 large-up-3">
  <div class="column">1 per row on small</div>
  <div class="column">2 per row on medium</div>
  <div class="column">3 per row on large</div>
</div>