The EZPZ Flexbox Grid might be just the grid for you

The EZPZ Flexbox Grid is easy peasy to setup and use! All you need to do is download the .SCSS file, add it to your project, configure it just the way you like it and compile. That's all. You can now leverage the power of flexbox for the grid of your project.

Which browsers are supported?

Before I even dive into the specifics of the grid, I am sure you are wondering which browsers are supported, since it's a Flexbox grid. Currently it works in all modern browsers out of the box. Older browsers like IE10 can be supported by using Autoprefixer to generate the deprecated Flexbox syntax.

A deliberate decision has been made to not support any browsers that do not support the flexbox syntax, because the main goal of this grid system is to take as much dull work out of your hands as possible and to keep the CSS footprint small. The fact that Microsoft has recently decided to drop support for IE10 and below made this quite an easy decision.

If you need to support older browsers than the ones listed above this is NOT the grid for you. If you do have the luxury to create a project for more recent browsers, this might be something you want to play around with.

β€œIt's easy to setup and generate your own grid file so you have full control over the features and output size of your CSS.”

Use only what you need

If you don't want a bloated CSS file with a ton of options you probably do not want to use anyway, you're in luck.

This EZPZ Flexbox Grid isn't just a CSS file that you can download and include in your project, but it's a .SCSS file that you can configure to generate a grid that only uses what you need. It comes with a few basic features that work straight out of the box, and the rest is up to you. It's easy to setup and generate your own grid file so you have full control over the features and output size of your CSS.

The default features

A grid system is used to divide the content on your page, but this time not only horizontally, but also vertically. Through the use of flexbox it's easy to decide if a content section should be laid out horizontally or vertically. By nesting grid sections it's easy to quickly whop together a basic frame for your site.

No more rows and cols

Many grid systems use row and col classes to define the behaviour of elements on the page. This makes sense in a classical way of thinking about grid systems, but since we can now lay out a grid section vertically, these classes do not make as much sense as they used to do.

Introducing grid and cell

As an alternative to the classical row and col setup, the EZPZ Flexbox Grid uses grid and cell classes instead. A grid element is basically a container for the content items which are placed in cells. It's up to you to decide their orientation. If you don't like the grid class you can change this by editing the namespace variable in the .SCSS file.

To evenly distribute cells within a grid section all you have to do is add cell classes to the child elements of a grid section and they will automatically take up an equal amount of space within their parent.

Equal height columns, the easy way

One of the brilliant things about flexbox is that all flex-items are automatically equal height containers. This means that you no longer have to use hacks or JavaScript to create columns that look like they are the same height, it does this for you.

All of the default behaviour can be viewed in detail on the default features section on the Github page.

The optional features

By default the EZPZ Flexbox Grid has a lot of the good stuff disabled to reduce classes and CSS file size, but it's easy to add a ton of extra functionality to your grid.

These options include changing the order of cells within a section, offsetting cells, changing the way cells align by overwriting the default equal height behaviour, collapsing gutters and grid sections that automatically wrap cells to a new line when there's not enough space to house them.

Going into each setting in depth would make this article too lengthy, but they can be viewed at the optional features section on the Github page.

The responsive features

It's possible to define your own breakpoint names and widths and the EZPZ Flexbox Grid will automatically create responsive classes for all the features you have enabled. These classes allow you to overwrite the behaviour you set for a grid section or cell at the respective breakpoints.

For example, you might start out with 2 cells in a 50% / 50% layout on mobile devices, but as soon as you scale up to tablet sizes you might want them to behave like 75% / 25%. With responsive classes you can do just that.

Detailed examples can be found on the responsive features section of the Github page.

Maybe it's time to stop thinking in columns

Although columns are the default setting for this grid system (because most people are used to this line of thought), I'd like to make an argument against their use.

Columns make a lot of sense when you start working on a project. You've decided to use a 12 column grid and when you want a section to take up 75% of the horizontal space, you just add a col--8 class to the element, pretty easy. But things can easily get complicated when you decide to nest a few grid sections. Suddenly you are stuck with a whole bunch of col classes that do not seem to make a lot of sense. Because a col--6 element nested within another col--6 element only takes up 3 columns out of your base total of 12. See where this is going?

Let me tell you about fractions

Fractions are easy, fractions make sense. You want a cell to take half of the total available space? Add a cell--1/2 class and you're good to go. Semantically this makes a lot of sense, you get what you see. If you want to nest a grid section inside your half width cell that contains a three-quarters and one-quarter cell, you add the cell--3/4 and cell--1/4 classes to the nested cells and you're done.

These kind of classes are easy to read and understand. The best thing is, you can decide which fractions you want to use by adding or changing them in the grid setup.

Give it a whirl

If you would like to try the grid system, please have a look at the EZPZ Flexbox Grid Github Page. Here you will find detailed documentation and many examples on how to use the grid.