I've always been a fan of 960 Grid System. It changed the way a lot of us think of coding websites.
And, of course, the 978 Grid System is currently doing a great job of refreshing that system. It's a wonderful collection of pixel values. But, I just had an idea -- what if you have a grid, with different gutter values, within that grid? Instant flexibility, it seems.
Dead simple to use. Just view the raw version of the text below, and copy and paste into your stylesheet.
The only thing you'll have to keep in mind, is that when you use a nested
.c container, you don't need to use the
.first class on the immediate
.g child elements.
(If you don't like my class names, that's fine. Just Cmd+F, innit.
Yep, for now.
Unfortunately we don't have any real-world examples just yet. But at Motionlab, we'll soon be looking into using it on our upcoming projects.
Oh yeah - I haven't tested this in Internet Explorer and friends yet, as I don't have access to it over my holidays. But once I get back into the office, I'll be sure to give you the green or red light.
So, this is the normal 978 grid system. But what happens if you put another grid inside of it?
Take a look at the other side…
This is another
.g6, but contained by two
See how it breaks the grid, and allows for finer gutters?
That's the essence of Taco!