Ungrid is a nifty grid that packs everything in less than a hundred bytes by
display: table trick:
And it's quite powerful see the demo plus
display: table is a nifty trick that solves issues with
Actually it seems the browsers are getting up to speed with Flexible Box Layout.
Even if it's time to jump on the F-train, this is a cool experiment.
Another sweet concept that offers a bunch of immutable css styles that allow you to work by writing everything in HTML. Check the examples. It offer a grid of it's own and the opportunity to combine the best of both worlds is too good to pass up.
Let's use SASS for this, as I am most comfortable with it. And add some variables to the mix:
Throw in grid classes from BASSCSS
@for we can calculate all the values upfront.
Okay time to add some gutters. The tricky part here is that you can't simply use
negative margins as they don't work well on
display: table. Element only moves to the left.
We could solve it by using some container element as Chris Nager did here But that is not very fun so as I know for fact that all my users are using Chrome I can
once again resort to the power of calc.
Let's also fix the counter effect of floats introduced by BASSCSS grid and add a gutter variable.
This introduces the negative margin on the right so it's best to be aware of it.
What's the point of it? It is small, flexible, the columns are arranged automatically. All columns are having equal height and you don't need clearfix and you can center content vertically.
There are some nuances though as the negative margin should be negated on the right
if you are using the grid as the top element on the page. Either with an
I have set up a homepage for it firedev/nanogrid so have a look.