Last Updated: March 07, 2016

calc() Grids Are Better

At first we had 960.gs. A fixed grid. Then responsive web-design came out and everyone migrated to percentage based grids.

Percentage based grids were okay, but broke when you started nesting them. Imagine you have 2 elements side-by-side within a 1000px container. They're 49% wide and have a 2% margin between them. This works fine. You end up with columns that are 490px wide and a gutter of 20px.

But when you nest, things break. 2% of 1000px is larger than 2% of 490px.

Demo of this problem

This was a real problem because it threw your whole grid off if your columns weren't in sync.

This was Bootstrap 2's grid.

People finally got together to address the problem. 2 solutions came from it.

CSS padding based grids
Preprocessor ratio grids

Padding based grids are like what Bootstrap 3 and Foundation use. They bypass the gutter problem, but in exchange, you have to write extra elements anytime you want them to have a background or border.

Gallery tutorial of this problem

Preprocessor ratio grids are what things like Susy, Jeet, Singularity, and Bourbon Neat use. They're pretty great because it bypasses both the illustrated problems, but they also suck because you have to repeat yourself a lot in your preprocessor language.

For instance, with Jeet you have to write the parent context ratio for every element that is nested in order for it's formula to know how big to make the gutters.

Demo of the problem

It's like this in some form or fashion for all of the ratio grid systems.

There's another problem that you can't specify a fixed gutter with ratio grids. You just have to "eyeball it" and set your gutter accordingly.

I still think this is better than writing tons of extra markup, so I'm a fan of preprocessor ratio grids.

Now... what if we could have a ratio grid with the following features:

Fixed gutters for custom sizing
Ratio (fractions) widths for on-the-fly grids
No extra markup
No extra style for nesting

Well, this is what sweet, sweet, calc() does.

This is why I made Elf and Dragon (Dragon is just Elf condensed down to a single mixin).

If you don't need to support old Android or IE8 then I suggest you make the switch from whatever grid system you're currently using to Elf or Dragon as you're missing out on some really lightweight, beautiful, flexible grids.