Intro to Foundation | Lesson #151
Don’t Let Your Grid be a Blocker
Foundation's Block Grid
Learn how to use the Foundation Block Grid to create image galleries, product layouts, and more.
Using a responsive front-end framework like Foundation ensures that your content will look good on any device. But with a little tweaks and styling, you can make your content look not just good, but great. For example, sometimes you want a grid to contain arbitrary amounts of content. If you left it up to the framework, the result would be readable, but those columns would be all different sizes. That’s where the Block Grid can come in handy. By using “parent level sizing” (on your .row) to dictate the width of the children (your .columns), it can create equal width columns that look clean and balanced. You can add an infinite number of blocks into a row and control how many blocks will fit on each line before wrapping. In this lesson, you’ll learn how to use the Foundation Block grid and some best practices to get the layout you want.
When to Use the Block Grid
Block grids give you a way to evenly split content within the grid. If you wanted to create a row of five images or paragraphs that need to stay evenly spaced no matter the screen size, then you could easily whip up this layout using the Block Grid. Without the Sass version, this is more difficult with the regular grid.
Block Grids automatically clears floats so you can have as many blocks in one row container as needed. You can define how many blocks should be on each line for every breakpoint allowing the extra blocks to wrap to the next line. This is great if you are dynamically adding arbitrary amounts of content into it. The columns will wrap infinitely based on the responsive parent level sizing classes used.
Block Grid Classes
The number of blocks or
.columns you want on each line can be defined right on your
.row, thus “parent level sizing”. With the Block Grid the
.columns within the
.row do not need individual sizing classes (because they will all be equal width). So for example, if you had a
.large-up-4 class, each block will be 25% of the width of the row on the large breakpoint. The classes determine what breakpoint they apply to and how many columns per line before wrapping.
Large Breakpoint Example
Image credit: Purecycle.com
Small Breakpoint Example
The Block Grid classes are mobile first, just like the standard grid classes. For example, defining a
.large-up-4 means that there will be two columns on each line on the small breakpoint and the medium-breakpoint, and four columns on the large breakpoint and larger.
Block Grid Best Practices
The Block Grid Spacing is controlled using the Grid column gutter. If you want to increase the spacing between the content in your block grid just for the Block Grid, it’s best to do so with margin around your content inside the column.[See Codepen Example]
To create even spacing around your columns both horizontally and vertically, you can add the
.column-block class to the
Block Grid with Flexbox
If you haven’t heard, flexbox is an amazing improvement over floats! Something that was not possible with floats (aside from using JS) is to automatically center the columns in a Block Grid. For example if you had a column or two that don’t fill up the row, with Flexbox you can center them automatically.
So something like this has two orphan columns on the left.
Using the flexbox helper class
.align-center in Foundation, we can center the orphan columns.
[See Codepen Example]
Alright, now that you know how to get the most out of the Foundation Block Grid, you can build responsive layouts faster and more effectively! For a deeper dive into Foundation’s Grid and how you can use Foundation’s UI to build your layouts fast, check out our Intro Foundation online course. You’ll learn tons of tips and tricks directly from the Foundation development team.
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.