I love frameworks like Foundation and Twitter Bootstrap. However, some times you just need to quickly roll a grid that you don't necessarily need to have responsive capabilities. Or, maybe you don't even want it to be a responsive grid. That's exactly what I've run into in my latest project. So, I looked for an alternative. I didn't need it to be responsive, but I still want my grid to be nest-able. I was already using the Compass CSS framework, so I thought I'd try their blueprint grid. It wasn't bad until I found that I couldn't easily nest the grid like this:

<div class="container">
    <div class="column span-8">
        <div class="container">
            <div class="column span-6">
                <p>I'm in a nested grid!</p>
            </div>
            <div class="column span-6">
                <p>What?! Me too!</p>
            </div>
        </div>
    </div>
    <div class="column span-4">
        <p>Those other P tags are so cool, they are nested.</p>
    </div>
</div>

As you can see, my second container is nested. The first time I tried to do that with the Compass Blueprint framework, I did not get the results I wanted. Here's what I did to get a nice nest-able grid.

Set up blueprint

TLDR: If you're already familiar with setting up Compass Blueprint, jump down to Make it nest-able.

First we have to set up blueprint, so I'll go ahead and run through that real quick so we're all on the same page.

Import the blueprint reset

@import "blueprint/reset";

Set up my personal grid preferences

$blueprint-liquid-grid-columns: 12;
$blueprint-liquid-grid-width: 8.33333%;
$blueprint-liquid-grid-margin: 0;
$blueprint-liquid-container-width: 1020px;
$blueprint-liquid-container-min-width: 0;

Import blueprint module

// Import all the default blueprint modules so that we can access their    mixins.

@import "blueprint";

Let's go ahead and use the blueprint liquid scaffolding model to get us started

// Import the liquid scaffolding module.
@import "blueprint/liquid";

Not necessary, but can't hurt to grab some CSS3 stuff too!

@import "compass/css3";
@import "compass/typography/text/";

It's 2013, let's go ahead and use border-box if we can

//Set up browsers to use border-box
*, :before, :after {
    @include border-box;
}

Let the blueprint mixins do their job to use our grid configuration

// Generate the blueprint framework according to your configuration:
@include blueprint;
@include blueprint-liquid-grid;

Make it nest-able!

Ok, most of the stuff before this is just the general stuff you have to do to get going with blueprint.

//Tweak the grid settings to allow for nested grids
.container {
    overflow: visible; //override compass *see why in notes at end of tip

    //clearfix - or use a mixin if you've got one!
    &:before,
    &:after {
        content: " ";
        display: table;
    }

    &:after {
        clear: both;
    }
}

.column {
    padding: 0 15px;
    position: relative;
}

.container .container {
    width: auto;
    overflow: visible;
    margin: 0 -15px;
}

So there you have it. Nest-able grids using Compass Blueprint.

*Notes: Why did I set my container to overflow:visible? Well, I like to use overflow:hidden sparingly to clear floats. I only use it on elements I know I won't be trying to let child items be positioned in a way that they won't get cut off by overflow:hidden. So, I used a different clearfix on my containers. Personal preference.

This solution is really just for Compass Blueprint. Obviously you have many many framework choices. I was already using Compass and didn't want to load in an entirely different framework just for the grid.

Also, it's not too daunting to just write your own quick grid solution if you don't need anything crazy. http://css-tricks.com/dont-overthink-it-grids/