Intro to Foundation | Lesson #144
Get More Control with Foundation's Grid Utility Classes
Learn how to use Foundation’s Grid utility classes to better fit your content.
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
.large-centered on the column will center the column for you. You can even combine the classes like this:
Foundation 6 Webinar Course
Get the most out of the 50% lighter-fewer style overrides-single click project spin up Foundation 6. In this 4-hour live webinar class, we'll walk you through the world's most advanced front-end framework. If you have a basic knowledge of HTML/CSS and want to learn how to use Foundation in your projects, this class is for you.
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.
.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
.large-collapse. If you need to un-collapse, then
.large-uncollapse comes in handy.
Check out the final demo: Foundation Grid Utility Classes
That’s it for this week! There’s so much more you can do with the responsive grid in Foundation. If you’re looking for a deeper dive, join us for one of next Introduction to Foundation course. Until next week, go build something amazing!
About the instructor
Rafi Benkual oversees the Foundation Forum. Rafi managed people, stores and small organizations before joining ZURB as our Foundation Advocate.
Product Design Lessons, Direct to Your Inbox
We're just getting started, so sign up and we'll keep you in the know with our product design lessons. No spam here.