Nested responsive grids

Generate a responsive grid that maintains it’s column sizes two levels deep. View Demos.

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.

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.