MUSIC ON

The Grid

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

The Basics

The grid is built around two key elements: rows and columns. Rows create a max-width and contain the columns; columns create the actual structure. For layouts to work properly, always put your page content inside a row and a column.

What you need to know is that columns don’t have a fixed width. They can vary based on the resolution of the screen, or the size of the window (try scaling down this window to see what we mean). Design with that in mind.

Technical Details

The Foundation 3 grid, like everything else in Foundation 3, is built with

box-sizing: border-box

, a powerful CSS property that tells the browser to consider border and padding as part of the width of an object rather than as an addition. That enables us to construct the grid extremely simply, which is good news for anyone who lamented how difficult it was to modify the Foundation 2 grid.

Gutters are created simply with padding on the columns. That means columns have simple widths like 25%, or 50%. Adjusting the padding adjusts the gutters, and this can be controlled either through Scss variables, the download customizer, or through the CSS itself.


Examples

Below is a visible example of the grid. Each column block is sized based on how many of the 12 columns it takes up, and where you see thicker borders it’s because two columns are running against each other.

  • .four.columns
    .four.columns
    .four.columns
    .three.columns
    .six.columns
    .three.columns
    .two.columns
    .eight.columns
    .two.columns
    .one
    .eleven.columns
    .two.columns
    .ten.columns
    .three.columns
    .nine.columns
    .four.columns
    .eight.columns
    .five.columns
    .seven.columns
    .six.columns
    .six.columns
    .seven.columns
    .five.columns
    .eight.columns
    .four.columns
    .nine.columns
    .three.columns
    .ten.columns
    .two.columns
    .eleven.columns
    .one
    .twelve.columns
  • 
    
    <div class="row">
    
      <div class="four columns">
    
        .four.columns
    
      </div>
    
      <div class="four columns">
    
        .four.columns
    
      </div>
    
      <div class="four columns">
    
        .four.columns
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="three columns">
    
        .three.columns
    
      </div>
    
      <div class="six columns">
    
        .six.columns
    
      </div>
    
      <div class="three columns">
    
        .three.columns
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="two columns">
    
        .two.columns
    
      </div>
    
      <div class="eight columns">
    
        .eight.columns
    
      </div>
    
      <div class="two columns">
    
        .two.columns
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="one columns">
    
        .one
    
      </div>
    
      <div class="eleven columns">
    
        .eleven.columns
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="two columns">
    
        .two.columns
    
      </div>
    
      <div class="ten columns">
    
        .ten.columns
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="three columns">
    
        .three.columns
    
      </div>
    
      <div class="nine columns">
    
        .nine.columns
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="four columns">
    
        .four.columns
    
      </div>
    
      <div class="eight columns">
    
        .eight.columns
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="five columns">
    
        .five.columns
    
      </div>
    
      <div class="seven columns">
    
        .seven.columns
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="six columns">
    
        .six.columns
    
      </div>
    
      <div class="six columns">
    
        .six.columns
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="seven columns">
    
        .seven.columns
    
      </div>
    
      <div class="five columns">
    
        .five.columns
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="eight columns">
    
        .eight.columns
    
      </div>
    
      <div class="four columns">
    
        .four.columns
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="nine columns">
    
        .nine.columns
    
      </div>
    
      <div class="three columns">
    
        .three.columns
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="ten columns">
    
        .ten.columns
    
      </div>
    
      <div class="two columns">
    
        .two.columns
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="eleven columns">
    
        .eleven.columns
    
      </div>
    
      <div class="one columns">
    
        .one
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="twelve columns">
    
        .twelve.columns
    
      </div>
    
    </div>
    
    

Note: In order to work around browsers’ different rounding behaviours, 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

class="end"

in order to override that behaviour.

This won’t work by default in IE8 since it doesn’t support

:after

but you can simply add a new class to override this if you run into this problem.

.four.columns
.four.columns
.four.columns
.four.columns.end

Nesting Support

The grid allows for nesting down as far as you’d like, though at a certain point it will get absurd. You can use this nesting to create quite complex layouts, as well as some other tricks like form layouts or visual elements.

  • .twelve

    .four

    .four

    .four
    .four
    .four
    .four
  • 
    
    <div class="row">
    
      <div class="twelve columns">
    
        .twelve
    
        <div class="row">
    
          <div class="four columns">.four</div>
    
          <div class="four columns">
    
            .four
    
            <div class="row">
    
              <div class="four columns">.four</div>
    
              <div class="four columns">.four</div>
    
              <div class="four columns">.four</div>
    
            </div>
    
          </div>
    
          <div class="four columns">.four</div>
    
        </div>
    
      </div>
    
    </div>
    
    

Offsets

Offsets allow you to create additional space between columns in a row. The offsets run from offset-by-one all the way up to offset-by-eleven. Like the rest of the grid, they’re nestable.

  • .one
    .eleven.columns
    .one
    .ten.columns.offset-by-one
    .one
    .nine.columns.offset-by-two
    .one
    .eight.columns.offset-by-three
    .seven.columns.offset-by-five
    .six.columns.offset-by-six
    .five.columns.offset-by-seven
    .four.columns.offset-by-eight
  • 
    
    <div class="row">
    
      <div class="one columns">
    
        .one
    
      </div>
    
      <div class="eleven columns">
    
        .eleven.columns
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="one columns">
    
        .one
    
      </div>
    
      <div class="ten columns offset-by-one">
    
        .ten.columns.offset-by-one
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="one columns">
    
        .one
    
      </div>
    
      <div class="nine columns offset-by-two">
    
        .nine.columns.offset-by-two
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="one columns">
    
        .one
    
      </div>
    
      <div class="eight columns offset-by-three">
    
        .eight.columns.offset-by-three
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="seven columns offset-by-five">
    
        .seven.columns.offset-by-five
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="six columns offset-by-six">
    
        .six.columns.offset-by-six
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="five columns offset-by-seven">
    
        .five.columns.offset-by-seven
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="four columns offset-by-eight">
    
        .four.columns.offset-by-eight
    
      </div>
    
    </div>
    
    

Centered Columns

Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element itself. This is a convenient way to make sure a block is centered, even if you change the number of columns it contains. Note: There cannot be any other column blocks in the row for this to work.

  • .one.columns.centered
    .two.columns.centered
    .three.columns.centered
    .four.columns.centered
    .five.columns.centered
    .six.columns.centered
    .seven.columns.centered
    .eight.columns.centered
    .nine.columns.centered
    .ten.columns.centered
    .eleven.columns.centered
    .twelve.columns.centered
  • 
    
    <div class="row">
    
      <div class="one columns centered">
    
        .one.columns.centered
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="two columns centered">
    
        .two.columns.centered
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="three columns centered">
    
        .three.columns.centered
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="four columns centered">
    
        .four.columns.centered
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="five columns centered">
    
        .five.columns.centered
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="six columns centered">
    
        .six.columns.centered
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="seven columns centered">
    
        .seven.columns.centered
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="eight columns centered">
    
        .eight.columns.centered
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="nine columns centered">
    
        .nine.columns.centered
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="ten columns centered">
    
        .ten.columns.centered
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="eleven columns centered">
    
        .eleven.columns.centered
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="twelve columns centered">
    
        .twelve.columns.centered
    
      </div>
    
    </div>
    
    

Source Ordering

Sometimes within the grid you want the order of your markup to not necessarily be the same as the order items are flowed into the grid. Using our source ordering classes,

.push-#/pull-#

, you can shift columns around on desktops and tablets. On phones, the grid will still be linearized into the order of the markup.

The syntax supports push and pull for two to ten columns, and is added directly to the columns themselves.

  • .two.columns
    .ten.columns (last)
    .three.columns
    .nine.columns (last)
    .four.columns
    .eight.columns (last)
    .five.columns
    .seven.columns (last)
    .six.columns
    .six.columns (last)
    .seven.columns
    .five.columns (last)
    .eight.columns
    .four.columns (last)
    .nine.columns
    .three.columns (last)
    .ten.columns
    .two (last)
  • 
    
    <div class="row">
    
      <div class="two columns push-ten">
    
        .two.columns
    
      </div>
    
      <div class="ten columns pull-two">
    
        .ten.columns (last)
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="three columns push-nine">
    
        .three.columns
    
      </div>
    
      <div class="nine columns pull-three">
    
        .nine.columns (last)
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="four columns push-eight">
    
        .four.columns
    
      </div>
    
      <div class="eight columns pull-four">
    
        .eight.columns (last)
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="five columns push-seven">
    
        .five.columns
    
      </div>
    
      <div class="seven columns pull-five">
    
        .seven.columns (last)
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="six columns push-six">
    
        .six.columns
    
      </div>
    
      <div class="six columns pull-six">
    
        .six.columns (last)
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="seven columns push-five">
    
        .seven.columns
    
      </div>
    
      <div class="five columns pull-seven">
    
        .five.columns (last)
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="eight columns push-four">
    
        .eight.columns
    
      </div>
    
      <div class="four columns pull-eight">
    
        .four.columns (last)
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="nine columns push-three">
    
        .nine.columns
    
      </div>
    
      <div class="three columns pull-nine">
    
        .three.columns (last)
    
      </div>
    
    </div>
    
    <div class="row">
    
      <div class="ten columns push-two">
    
        .ten.columns
    
      </div>
    
      <div class="two columns pull-ten">
    
        .two (last)
    
      </div>
    
    </div>
    
    

Mobile Grid

The grid has two modes of adapting for small displays like phones. The first requires no work at all — the grid will linearize on a small device so your columns stack vertically. This is useful to quickly adapt a desktop layout to a simple scrolling mobile layout. When you’re creating your layout you can optionally attach classes that take your existing grid elements and attach them to a four column phone grid.

  • .three.mobile-one.columns
    .nine.mobile-three.columns
    .six.mobile-two.columns
    .six.mobile-two.columns
    .nine.mobile-three.columns
    .three.mobile-one.columns
  • 
    
    <div class="row">
    
        <div class="three mobile-one columns">
    
          .three.mobile-one.columns
    
        </div>
    
        <div class="nine mobile-three columns">
    
          .nine.mobile-three.columns
    
        </div>
    
      </div>
    
      <div class="row">
    
        <div class="six mobile-two columns">
    
          .six.mobile-two.columns
    
        </div>
    
        <div class="six mobile-two columns">
    
          .six.mobile-two.columns
    
        </div>
    
      </div>
    
      <div class="row">
    
        <div class="nine mobile-three columns">
    
          .nine.mobile-three.columns
    
        </div>
    
        <div class="three mobile-one columns">
    
          .three.mobile-one.columns
    
        </div>
    
      </div>
    
    

Mobile Source Ordering

You can use the same push and pull style classes on the 4-column phone grid. The syntax includes

.pull-one-mobile

,

.pull-two-mobile

,

.pull-three-mobile

, as well as

.push-one-mobile

,

.push-two-mobile

,

.push-three-mobile

.


Block Grids

Block grids are made from a

ul.block-grid

with

#-up

styles chained to it. You control how many you have in your Scss setting file or the customizer. These are ideal for blocked-in content generated by an application, as they do not require rows or even numbers of elements to display correctly.

By default, these blocks will stay in their N-up configuration on mobile devices, but you can add a class of “mobile” to have them reshuffle on smartphones into one element per line, just like the grid. If you want to use a different layout for mobile, say

.five-up

for large screens and

.three-up

for small devices, you can simply use classes like,

.mobile-three-up

.

Two-up

    • Two-up element
    • Two-up element
    • Two-up element
    • Two-up element
    • Two-up element
  • 
    
    <ul class="block-grid two-up">
    
      <li>Two-up element</li>
    
      <li>Two-up element</li>
    
      <li>Two-up element</li>
    
      <li>Two-up element</li>
    
      <li>Two-up element</li>
    
    </ul>
    
    

Three-up / Five-up Mobile

    • Three-up element
    • Three-up element
    • Three-up element
    • Three-up element
    • Three-up element
  • 
    
    <ul class="block-grid three-up mobile-five-up">
    
      <li>Three-up element</li>
    
      <li>Three-up element</li>
    
      <li>Three-up element</li>
    
      <li>Three-up element</li>
    
      <li>Three-up element</li>
    
    </ul>
    
    

Four-up / Stacked Mobileup

    • Four-up element
    • Four-up element
    • Four-up element
    • Four-up element
    • Four-up element
    • Four-up element
  • 
    
    <ul class="block-grid four-up mobile">
    
      <li>Four-up element</li>
    
      <li>Four-up element</li>
    
      <li>Four-up element</li>
    
      <li>Four-up element</li>
    
      <li>Four-up element</li>
    
      <li>Four-up element</li>
    
    </ul>
    
    

Six-up / Two-up Mobile

    • Six-up element
    • Six-up element
    • Six-up element
    • Six-up element
    • Six-up element
    • Six-up element
  • 
    
    <ul class="block-grid six-up mobile-two-up">
    
      <li>Six-up element</li>
    
      <li>Six-up element</li>
    
      <li>Six-up element</li>
    
      <li>Six-up element</li>
    
      <li>Six-up element</li>
    
      <li>Six-up element</li>
    
    </ul>
    
    

Clearing issues with IE8

Sometimes there are clearing issues in IE8. If you are seeing these issues, simply uncomment the Block Grid section within your foundation app.js file. If you don’t have those line in your app.js file, copy them below:



$('.block-grid.two-up>li:nth-child(2n+1)').css({clear: 'both'});

$('.block-grid.three-up>li:nth-child(3n+1)').css({clear: 'both'});

$('.block-grid.four-up>li:nth-child(4n+1)').css({clear: 'both'});

$('.block-grid.five-up>li:nth-child(5n+1)').css({clear: 'both'});


Don’t want mobile?

You can either not include it in your custom imports for your Scss project or uncheck it in the customizer. The trick to making this work is to set the

max-width

of your

.row

so that it doesn’t scale.


One breakpoint to rule them all

Work around our grid that has a single breakpoint for small devices below 768px.

Learn about our media queries »

Our Partners