Eu amo frameworks como Foundation e Twitter Bootstrap. No entanto, algumas vezes você só precisa rolar rapidamente uma grade que você não precisa necessariamente ter recursos responsivos. Ou talvez você nem queira que seja uma grade responsiva. Isso é exatamente o que encontrei em meu último projeto. Então, procurei uma alternativa. Eu não precisava que ele respondesse, mas ainda quero que minha grade seja capaz de aninhar. Eu já estava usando o framework Compass CSS, então pensei em tentar sua grade de blueprint. Não era ruim até que descobri que não poderia facilmente aninhar a grade assim:

<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>

Como você pode ver, meu segundo contêiner está aninhado. A primeira vez que tentei fazer isso com a estrutura do Compass Blueprint, não obtive os resultados que queria. Aqui está o que fiz para obter uma grade com capacidade de nidificação.

Configurar planta

TLDR: Se você já está familiarizado com a criação de Compass Blueprint, pular para Torná-lo ninho capaz .

Primeiro temos que configurar o blueprint, então irei em frente e examinarei rapidamente para que todos estejamos na mesma página.

Importar a redefinição do blueprint

@import "blueprint/reset";

Configurar minhas preferências pessoais de grade

$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;

Módulo de importação de blueprint

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

@import "blueprint";

Vamos seguir em frente e usar o modelo de estrutura líquida de blueprint para começar

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

Não é necessário, mas não custa nada pegar algumas coisas CSS3 também!

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

É 2013, vamos em frente e usar o border-box se pudermos

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

Deixe os mixins de blueprint fazerem seu trabalho para usar nossa configuração de grade

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

Torne-o capaz de aninhar!

Ok, a maioria das coisas antes disso são apenas as coisas gerais que você precisa fazer para seguir com o 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;
}

Então aí está. Grades aninhadas usando o Compass Blueprint.

* Observações: por que configurei meu contêiner para estouro: visível? Bem, eu gosto de usar overflow: hidden moderadamente para limpar flutuadores. Eu só uso em elementos que sei que não vou tentar deixar itens filhos serem posicionados de uma forma que eles não sejam cortados por overflow: hidden. Então, usei um clearfix diferente em meus contêineres. Preferência pessoal.

Esta solução é realmente apenas para Compass Blueprint. Obviamente, você tem muitas opções de framework. Eu já estava usando o Compass e não queria carregar em uma estrutura totalmente diferente apenas para a grade.

Além disso, não é tão assustador apenas escrever sua própria solução de grade rápida se você não precisa de nada louco. http://css-tricks.com/dont-overthink-it-grids/