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 .small-up-2 and .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.

[See Codepen Example]

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 .column.

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]

---