Foundation
Jump to Nav

Flex Grid

New in Foundation 6 is a Flexbox-powered grid, which you can use instead of the traditional float grid.


The flex grid works very similarly to the standard float grid, but includes a number of useful features only possible with flexbox, like horizontal and vertical alignment, automatic sizing, and easier source ordering.


Browser support

The flex grid is only supported in Chrome, Firefox, Safari 6+, IE10+, iOS 7+, and Android 4.4+. Flexbox is supported in Android 2, but not reliably enough for use with this grid. (View flexbox browser support.) We recommend only using the flex grid on projects that can live with purely cutting-edge browser support.

In Firefox 43+, images in flex columns may overflow their container. To fix this, add a defined width to any images inside a flex column, or use width: 100% for full-bleed images.


Importing

If you're using the CSS version of Foundation, you can generate a custom download of Foundation with flexbox mode enabled.

If you're using the Sass version of Foundation, you can enable a framework-wide flexbox mode, and add exports for the flex grid and flexbox helper classes. Learn more about enabling flexbox mode.

@import 'foundation';

// @include foundation-grid;
@include foundation-flex-classes;
@include foundation-flex-grid;

The flex grid uses the same settings variables as the float grid to adjust gutter size, column count, and so on. Refer to the Sass variable reference for the default grid to see how the flex grid can be customized.

The standard grid and flex grid use some of the same classes, namely .row and .column, and don't play nice together. If you want to use both in the same project, we recommend using the Sass mixins for each grid, instead of the default CSS.


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.

<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>
6 columns
6 columns
12/6/4 columns
12/6/8 columns

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.

<div class="row">
  <div class="small-4 columns">4 columns</div>
  <div class="columns">Whatever's left!</div>
</div>
4 columns
Whatever's left!

Multiple expanding columns will share the leftover space equally.

<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>
4 columns
Whatever's left!
Whatever's left!

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.

<div class="row">
  <div class="shrink columns">Shrink!</div>
  <div class="columns">Expand!</div>
</div>
Shrink!
Expand!

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.

<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>
One
Two
Three
Four
Five
Six

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.

<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>
One
Two
Three
Four
Five
Six

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.

<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>
Aligned to
the left
Aligned to
the right
Aligned to
the middle
Aligned to
the edges
Aligned to
the space around

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.


Vertical Alignment

By default, all columns in a flex grid stretch to be equal height. This behavior can be changed with another set of alignment classes. That's right, middle alignment in CSS!

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.

<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>
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-top">
  <div class="columns">These columns align to the top.</div>
  <div class="columns">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.</div>
</div>
These columns align to the top.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.

Similar alignment classes can also be applied to individual columns, which use the format .align-self-* instead of .align-*.

In Foundation 6.2, we introduced the .align-self-* classes, which replace the old method of using .align-* classes on columns. The old classes will be removed completely in Foundation 6.3.

<div class="row">
  <div class="column align-self-bottom">Align bottom</div>
  <div class="column align-self-middle">Align middle</div>
  <div class="column align-self-top">Align top</div>
  <div class="column">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?</div>
</div>
Align bottom
Align middle
Align top
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?

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.

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

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!


Offsets

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

<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>
Offset 2 on large
4 columns

Source Ordering

Flexbox supports source ordering, making it easy to rearrange columns on different screen sizes without weird relative positioning tricks.

The CSS property is easy enough to remember.

.element {
  order: 1;
}

Columns within a row will be sorted by their order property. Lower numbers are placed first. If multiple columns have the same number, they're sorted in the order they appear in the HTML.

We have a set of classes that make it easy to setup source ordering in your HTML. They also come in responsive flavors, allowing you to reorder a grid on different screen sizes.

<div class="row">
  <div class="column small-order-2 medium-order-1">
    This column will come second on small, and first on medium and larger.
  </div>
  <div class="column small-order-1 medium-order-2">
    This column will come first on small, and second on medium and larger.
  </div>
</div>
This column will come second on small, and first on medium and larger.
This column will come first on small, and second on medium and larger.

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, or use one of the vertical alignment flexbox classes.

<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>
1 per row on small
2 per row on medium
3 per row on large

Sass Reference

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.

flex-grid-row

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

Creates a container for a flex grid row.

ParameterTypeDefault ValueDescription
$behavior Keyword or List 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.

$columns Number null

Number of columns to use for this row. If set to null (the default), the global column count will be used.

$base Boolean true

Set to false to prevent basic styles from being output. Useful if you're calling this mixin on the same element twice, as it prevents duplicate CSS output.

$gutters Number or Map $grid-column-gutter

Gutter map or single value to use when inverting margins, in case the row is nested. Responsive gutter settings by default.


flex-grid-column

@include flex-grid-column($columns, $gutter);

Creates a column for a flex grid. By default, the column will stretch to the full width of its container, but this can be overridden with sizing classes, or by using the unstack class on the parent flex row.

ParameterTypeDefault ValueDescription
$columns Mixed expand

Width of the column. Refer to the flex-grid-column() function to see possible values.

$gutter Number $grid-column-gutter

Space between columns, added as a left and right padding.


flex-grid-layout

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

Creates a block grid for a flex grid row.

ParameterTypeDefault ValueDescription
$n Number None

Number of columns to display on each row.

$selector String None

Selector to use to target columns within the row.


flex-grid-size

@include flex-grid-size($columns);

Changes the width flex grid column.

ParameterTypeDefault ValueDescription
$columns Mixed expand

Width of the column. Refer to the flex-grid-column() function to see possible values.


Functions

flex-grid-column

flex-grid-column($columns)

Calculates the flex property for a flex grid column. It accepts all of the same values as the basic grid-column() function, along with two extras:

  • expand (the default) will make the column expand to fill space.
  • shrink will make the column contract, so it only takes up the horizontal space it needs.
ParameterTypeDefault ValueDescription
$columns Mixed expand

Width of the column.