Nested Responsive Grid

Bootstrap’s Nested Responsive Grid

When using another grid framework (like Twitter Bootstrap), nested grids get weird:

Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.

<div class="row-fluid">
    <div class="span6">
        6
        <div class="row-fluid">
            <div class="span6">3</div>
            <div class="span6">3</div>
        </div>
    </div>
</div>

That means that the sub columns will each be a “3” column. But, that 3 column width will not be the same as a standalone 3 column since it is a percentage of another percentage. It’s kind of hard to explain, but the below image should illustrate the problem. (view demo)

Notice the difference in column widths and margins across the two rows.

My Nested Responsive Grid

I hated that. So in my system, a “3” sub-column would equal the width of a standalone 3 column

<div class="row">
    <div class="span6">
        6
        <div class="row">
            <div class="span3">3</div>
            <div class="span3">3</div>
        </div>
    </div>
</div>

Notice the how the column widths and margins are maintained across the two rows. View demo or view more sub-column examples.