Foundation is all about responsiveness. Beyond small, medium, and large, Foundation provides you all kinds of useful grid utility classes to control how your content lays out in the grid. And each of these grid classes can be adjusted per breakpoint to really fit your content the way you intended, rather than the grid forcing your content to conform. In this lesson, we’ll cover some useful responsive grid utilities in Foundation and how you can use them for your layouts.

Control Your Content Width Using A Row Column

In Foundation 6, we added a handy feature called a row-column. We use this one often at ZURB. You can now combine the .row and the .column class on the same element to create a wrapper with the max-width of a row along with the column padding. If you are using a single column, you no longer have to create separate row and column div’s.

Not only does this save markup (which is always nice), but it also gives you a wrapper to constrain the width of content easily. So in the above example we are constraining the width of the row-column to 7 columns wide on the large breakpoint and 9 columns on the medium breakpoint. It helps keep your text line length in the optimal range (50-75 characters per line) improving readability. Best of all, it centers the column automatically as you’d expect.

Position Single Columns to the Right or Center

You’ll probably use this one a lot as well. Again, considering a single column in a row, you can offset a column over from the left by X number of columns. Let’s take a checkout form as an example:

We have an order summary section below the form in a single 4 column container. We need to “push” it over to the right side. Since we have 12 columns (default) to work with, we will offset the columns by 8. Offsets are relative to left side of a row, so offsetting by 8 columns will push it over 8 columns.

What if we wanted to center a single column in a row? There’s a class for that! Using .medium-centered or .large-centered on the column will center the column for you. You can even combine the classes like this:

Overlapping Columns

This is a fun one! You can even cause columns to overlap if you’d like. The same classes you would use for source ordering, can be used to “push” and “pull” columns into position.

So to make this, we can push columns over from the left using a class like .medium-push-1. This class will push the column over from the left by 1 column. This is different than an offset because it doesn’t push columns over, rather positions them so that two or more columns can be positioned differently by screen size.

Changing Column Gutters per Breakpoint

Another useful grid utility affords you the ability to remove the gutter (padding) on the columns for each breakpoint. Our example shows one use case. We have a dense image gallery. On a large screen we have removed the spacing so that all the images butt up together.

The .collapse class can be added to a row to remove padding on all the columns in the row. You can also do this per breakpoint with either .small-collapse, .medium-collapse, .large-collapse. If you need to un-collapse, then .small-uncollapse, .medium-uncollapse, .large-uncollapse comes in handy.

Check out the final demo: Foundation Grid Utility Classes

---