Add support for responsive layouts with margin-based gutters and calc()

[JohnAlbin]

Now that Microsoft has dropped support for IE8 and earlier, the support for CSS' calc() looks pretty good.

http://caniuse.com/#feat=calc

This means we could theoretically add support for responsive layouts with margin-based gutters.

The math will be tricky.

grid-width = (num-columns * column-width) + ((num-columns - 1) * gutter-width) And solving for column-width: column-width = calc( grid-width/num-columns - gutter-width * (num-columns - 1) / num-columns )

And it just gets ickier from there.

item-width = (span-columns * column-width) + ((span-columns - 1) * gutter-width)

item-width = (span-columns * ( grid-width/num-columns - gutter-width * (num-columns - 1) / num-columns )) + ((span-columns - 1) * gutter-width)

item-width = (span-columns * grid-width/num-columns) - (span-columns * gutter-width * (num-columns - 1) / num-columns )) + (((span-columns - 1) * gutter-width * num-columns) / num-columns)

item-width = (span-columns/num-columns) * grid-width - gutter-width * ((span-columns * (num-columns - 1)) + ((span-columns - 1) * num-columns)) / num-columns

And…

item-position = (position - 1) * (column-width + gutter-width)

Yeah, I'm not doing that last one now.