How to Choose the Right Foundation Grid

In today’s video we’re going to talk about the three grid systems which are currently found in ZURB’s Foundation framework. More specifically, we’ll examine which one we should use in various situations. Let’s jump in!

We've built a comprehensive guide to help you learn Foundation, whether you're just getting started or you want to explore more advanced topics check out Learn Foundation.

Choosing a Foundation Grid

1. The Float Grid

The first, and longest-serving of Foundation’s grids is the float grid. As its name suggests, it uses floated columns to create layouts.

The markup will likely be familiar to you; it uses the same row and column structure found on other systems:

2. The Flex Grid

The second example was introduced in Foundation 6 and goes by the name of “the flex grid”. It’s powered by CSS flexbox, and although it behaves very similarly to the flat grid it has some unique features such as vertical and horizontal alignment, and automatic sizing.

The markup is exactly the same as the float grid; you define rows and columns, and using special classes you can determine the size of those columns. However, because this grid is based on flexbox we have access to some more advanced capabilities. Autosizing is one such feature; if we leave out a sizing class on a column it will expand to fill the available space:

3. The XY Grid

Our third example is the most recent grid (and in my opinion the most awesome); the XY Grid, introduced in Foundation 6.4. Whilst also being powered by flexbox it does have some similarities to the flex grid, but there are also some big differences.

The first significant difference is that XY grid can render items both horizontally and vertically.

The second difference is the markup. Here we define a container element (either with a class of grid-x or grid-y) and then fill it with cell elements:

By default there’s no gutter at all, so all cells will sit flush with their surrounding cells. Instead, we define the gutter on the grid-x element: grid-margin-x or grid-padding-x (replacing the x for a y if we’re dealing with a vertical grid). The values these carry can be set using the Sass variables $grid-margin-gutters and $grid-padding-gutters respectively.

Which Foundation Grid Should You Choose?

When choosing which grid to use, the decision should be made based on a few factors.

Browser support is the most important, as flexbox doesn’t have universal support (IE being the questionable browser in this case). The float grid is unaffected by flexbox support in browsers.

Secondly, do you need vertical grid layout? If so, you’ll need to go for the XY grid.

Lastly, how important is code-writing speed and maintenance to you? The XY grid uses much simpler syntax than its predecessors, so will be much easier to work with.

For more details, check out the screencast above, or take a look at my most recent courses!