Understanding ZURB Foundation 5’s Grid System

ZURB’s Foundation 5 has a ton of great features. The one that you will probably use the most in your own websites and applications is the grid. If you are coming from a Bootstrap background, you may be familiar with that grid system already and love its ease of use and functionality.

Today we’ll be looking at Foundation 5’s grid system and all the great features it has. Foundation has

class names that are a little different than Bootstrap, but work in the same way. It also has some neat advanced features and great visiblity classes to show and hide elements based on the situation. Let’s jump right in and start using the Foundation grid system.

The Basics

Foundation uses a mobile-first grid system. This means that if you define a grid at

small devices, it will be used for medium and large devices. If you define a medium grid, it will be used for large devices, but small devices will not use the defined grid. Small devices will just have elements stack on top of each other.

Quick Example

Here’s a quick example of a 3 column layout.

<div class="row">
    <div class="small-4 columns">one-third</div>
    <div class="small-4 columns">one-third</div>
    <div class="small-4 columns">one-third</div>
</div>

See the Pen Foundation 5 Basic Grid Showcase by Chris Sevilleja (@sevilayha) on CodePen.

This will generate 3 columns. Notice how there is a max-width set for the row. Unlike Bootstrap, we won’t have to encompass our rows inside of a .container class.

Grid Sizes and CSS Classes

Each row is defined using the

.row class. Easy enough. The columns are created using the css classes: .small-#, .medium-#, and .large-#. The #s have to add up to be 12 since Foundation uses a 12 grid system. Also, a class that has to be attached to columns is .column or .columns. They both do the same thing. You can define any combination of layouts using the .row and .small/medium/large-# classes. The docs show a great deal of examples, so take a look over there for inspiration. If you need more help like having prebuilt pages and rows for you, take a look at Foundation’s templates. These are a great starting point.

Media Queries

Foundation comes with built-in media queries to help our sites be as responsive as possible. What’s interesting about the media queries here as compared to Bootstrap is that they are defined using

ems and not pixels. These media queries can be found on the media query docs. Take a look at the media queries and the comments to understand how Foundation breaks down our site.

// Small screens
@media only screen { } /* Define mobile styles */

/* max-width 640px, mobile-only styles, use when QAing mobile issues */
@media only screen and (max-width: 40em) { } 

/* ------------------------------------------
    Medium screens 
    min-width 641px, medium screens 
*/ ------------------------------------------
@media only screen and (min-width: 40.063em) { } 

/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
@media only screen and (min-width: 40.063em) and (max-width: 64em) { } 

/* ------------------------------------------
    Large screens
    min-width 1025px, large screens 
*/ ------------------------------------------
@media only screen and (min-width: 64.063em) { } 

/* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
@media only screen and (min-width: 64.063em) and (max-width: 90em) { } 

/* ------------------------------------------
    XLarge screens
    min-width 1441px, xlarge screens
*/ ------------------------------------------
@media only screen and (min-width: 90.063em) { }

/* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
@media only screen and (min-width: 90.063em) and (max-width: 120em) { } 

/* ------------------------------------------ 
    XXLarge screens
    min-width 1921px, xxlarge screens
*/ ------------------------------------------
@media only screen and (min-width: 120.063em) { }   

Nested

Nested grids help create some great layouts. To nest grids, just define a

.row inside of a .column and build out your grid like you normally would. Here’s some code and an example:

<div class="row text-center">
    <div class="small-4 columns">one-third</div>

    <div class="small-4 columns">
        <div class="row">
            <div class="small-6 columns">half of one-third</div>
            <div class="small-6 columns">half of one-third</div>
        </div>
    </div>
  
    <div class="small-4 columns">one-third</div>
</div>

See the Pen Foundation 5 Nested Grid Showcase by Chris Sevilleja (@sevilayha) on CodePen.

Advanced Uses

In addition to the basic grid and media queries, Foundation comes with some cool features and advanced things that help build out our applications.

Multiple Grid Definitions

Thanks to the

.small, .medium, and .large classes, we are able to define different grids at different sizes. Let’s say to have 2 columns on small devices and 3 columns on medium and large devices. We can do this by defining multiple classes on the same column.

<div class="row text-center">
    <div class="small-6 medium-4 columns">column 1</div>  
    <div class="small-6 medium-4 columns">column 2</div>
    <div class="show-for-medium-up medium-4 columns">only shows on medium and up</div>
</div>

See the Pen Foundation 5 Dynamic Grid Showcase by Chris Sevilleja (@sevilayha) on CodePen.

By resizing your browser, you can see the different configurations that we have defined.

Incomplete Rows

If you dont fill in all 12 rows of the grid, a neat feature is that the last column will automatically float off to the right. This is neat for creating sidebars. If you don’t want this to happen, just add the

.end class to your last column.

<div class="row text-center">
    <div class="small-2 columns">column 1</div>  
    <div class="small-2 columns">column 2</div>
    <div class="small-2 columns">go right</div>
</div>

<div class="row text-center">
    <div class="small-2 columns">column 1</div>  
    <div class="small-2 columns">column 2</div>
    <div class="small-2 end columns">stay here</div>
</div>

See the Pen Foundation 5 Incomplete Rows Showcase by Chris Sevilleja (@sevilayha) on CodePen.

Offsets

Offsets allow you to create spacing in your Foundation grid. By using one of the offset classes (

.small-offset-#, .medium-offset-#, or .large-offset-#) we are able to “offset” a column that many spaces.

<div class="row text-center">
    <div class="small-2 columns">column 1</div>  
    <div class="small-2 small-offset-3 columns">column 2</div>
    <div class="small-2 columns">go right</div>
</div>

See the Pen Foundation 5 Offsets Showcase by Chris Sevilleja (@sevilayha) on CodePen.

Centered Columns

Centered columns is a welcome feature. I was used to either creating some custom CSS or using offsets in Bootstrap to create a column in the center. It’s easily done in Foundation using the

.small-centered or .large-centered classes. Also, if you center something on small devices but want it to be normal on large devices, just add .large-uncentered.

See the Pen Foundation 5 Grid Centered Showcase by Chris Sevilleja (@sevilayha) on CodePen.

Visibility Classes

In addition to the grid itself, Foundation comes with a lot of classes to hide and show elements. This could come in handy in case you needed to hide things on large devices or only show elements on small or medium devices. The flexibility offered by these

visibility classes is great because there are so many of them for a multitude of occasions. We’ll just list out the classes here without examples. Just apply the classes to the element that you want to show or hide and it will magically disappear and reappear as you resize your browser.

Showing or Hiding Based on Screen Size

.show-for-small-only .show-for-medium-up .show-for-medium-only .show-for-large-up .show-for-large-only .show-for-xlarge-up .show-for-xlarge-only .show-for-xxlarge-up .hide-for-small-only .hide-for-medium-up .hide-for-medium-only .hide-for-large-up .hide-for-large-only .hide-for-xlarge-up .hide-for-xlarge-only .hide-for-xxlarge-up

Showing or Hiding Based on Orientation

Foundation even comes with a way to detect device orientation for those visiting your website using mobile browsers!

.show-for-landscape .show-for-portrait

Showing or Hiding Based on Touch Availability

Another cool visiblity feature: check to see if your user has a touchscreen.

.show-for-touch .hide-for-touch

Conclusion

ZURB’s Foundation 5 grid system comes with a ton of features and is one of the more robust and fully-featured grid systems out right now. The variety of classes, all the great features, using ems for the grid sizes, and the visibility classes all come together to create an awesome grid solution. If you are interested in where ZURB is going in the future with their grid systems, they are taking a forward-thinking approach and are taking a smart look at the state of applications. Their new ideas for grids creates more modern sites that are akin to their mobile counterparts. Read more about it here:

Foundation: A New Grid

Chris Sevilleja

Co-founder of Scotch.io. Slapping the keyboard until something good happens.