Nest Grid is a little SCSS grid which I built a couple of years ago and still tend to use as a base for new website builds (including on this website). It’s responsive in a stretchy kind of way—it’s created using percentage widths rather than lots of separate breakpoints—and uses variables to define columns, widths and gutters. So not particularly different to the hundreds of other grid systems out there then?

The one difference my grid has is the way in which it handles nested elements. With systems such as Bootstrap and Foundation the nested grid starts again inside each element; so with a twelve column grid, inside a block covering six columns would be another twelve column grid. With my grid, you only ever use the maximum number of columns— nested columns must add up to no more than the number parent columns. This is the way old static grids like 960gs used to work, except my grid is responsive and percentage width based.

I achieved this with some good old fashioned maths. If you divide the total width by the width of the parent element this gives you a “nested multiplier”. If you multiply the nested grid items percentage width by this number you get the same width as if the element wasn’t nested at all. All this so that my precious columns will always align perfectly.

If any of this didn’t make sense (which it almost certainly didn’t) then check the diagram and code below. You can download the grid.scss file from my github.

nestgrid-diagram

<p>A regular grid setup example...</p>

<div class="row">
	<div class="seven columns">
		<h1>Parent column one</h1>
		<div class="row">
			<div class="three columns">
				<h2>Nested column one</h2>
			</div>
			<div class="five columns">
				<h2>Nested column two</h2>
			</div>
			<div class="four columns">
				<h2>Nested column three</h2>
			</div>
		</div>
	</div>
	<div class="five columns">
		<p>Parent column two</p>
	</div>
</div>

<p>Nest Grid</p>

<div class="row">
	<div class="seven columns">
		<h1>Parent column one</h1>
		<div class="two columns first">
			<h2>Nested column one</h2>
		</div>
		<div class="two columns">
			<h2>Nested column two</h2>
		</div>
		<div class="three columns last">
			<h2>Nested column three</h2>
		</div>
	</div>
	<div class="five columns">
		<p>Parent column two</p>
	</div>
</div>