Foundation 6: The New Flex Grid

Last month I wrote posts covering what’s new in Foundation 6 as well a deep dive into Foundation’s new menu component.

Arguably one of the best parts of Foundation is the grid system. This system is the backbone of Foundation’s responsive design and gives you the flexibility to build anything from a simple two-column layout to a multi-level deep, intricate behemoth.

The grid is based on a responsive float system, with rows, columns, offsets, clearing (the standard elements you see across several frameworks). It’s worked great and overall is a great way to get up and running quickly with your designs, catering to the various device sizes and adapting your UI accordingly.

However, there’s a new system in play in Foundation 6.

[author_more]

Introducing: The New Flex Grid

In Foundation 6, Zurb has introduced the Flex Grid, an optional replacement for the standard grid.

Flex Grid, as you can guess, is powered by flexbox. Instead of using floats, offset positioning, and other tricks that the standard grid employs, the new grid system lets you take advantage of some of the powerful layout features of the flexbox model.

A word of caution before you jump in head-first: Since this new grid is powered by flexbox, naturally it will only work in supporting browsers. So if you need to support legacy browsers like IE8 and IE9 you will have to stick with the standard grid.

Flex Grid is Optional

Zurb doesn’t include the Flex Grid by default; it’s an optional component. If you’re using the Sass version of Foundation, start by finding the app.scss file inside your project and open it in your editor. Inside you will see the @include statements. You will need to remove or comment out the standard grid and add the flex grid, as shown below:

[code language="sass"]
// @include foundation-grid;
@include foundation-flex-grid;
[/code]

If you’re not using the Sass version and instead are creating your own custom build, you can include flex grid by choosing it from the customizer and downloading your combined CSS.

The flex grid is meant to be used a replacement to the standard grid, so you can’t use both at the same time out of the box. This is because they share class names such as .row and .column.

If you want to use both, you need to employ the Sass build of Foundation 6 and define your own basic grid by using the mixin for the standard grid. This will let you define your own structure so you can keep both in the same project (for example you might call your rows .row-old and your columns .column-old).

Continue reading %Foundation 6: The New Flex Grid%

by Simon Codrington via SitePoint