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:
<div class="row"> <div class="columns small-2">2</div> <div class="columns small-10">10</div> </div> <div class="row"> <div class="columns small-3">3</div> <div class="columns small-9">9</div> </div>
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:
<div class="row"> <div class="columns small-2">2</div> <div class="columns">no sizing</div> </div> <div class="row"> <div class="columns small-3">3</div> <div class="columns">no sizing</div> </div>
Alternatively, using a
shrink class will shrink the column to the minimum size its content needs:
<div class="row"> <div class="columns small-2">2</div> <div class="columns shrink">shrink</div> </div> <div class="row"> <div class="columns small-3">3</div> <div class="columns shrink">shrink</div> </div>
For more examples, check out the screencast above.
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-y) and then fill it with
<div class="grid-x"> <div class="cell small-4">4</div> <div class="cell small-2">2</div> <div class="cell small-6">6</div> </div>
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-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
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!