Taco! by @joecritchley

This is a zero fuss grid-in-grid experiment.

“A grid, inside a grid…”

What's the crack?

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.

How do you use it?

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.

Is that it?

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.

Da code.

Some quick examples.

So, this is the normal 978 grid system. But what happens if you put another grid inside of it?

Example Grid Placeholder
Example Grid Placeholder

Take a look at the other side…

Example Grid Placeholder Example Grid Placeholder
Example Grid Placeholder Example Grid Placeholder
Example Grid Placeholder Example Grid Placeholder Example Grid Placeholder

This is another .g6, but contained by two .c.

Example Grid Placeholder Example Grid Placeholder Example Grid Placeholder Example Grid Placeholder

See how it breaks the grid, and allows for finer gutters?

That's the essence of Taco!