Would like to see example code for nested grids with good gutter control

[moonbeetle]

If I nest a grid I always get double the margin-left or padding-left.

[scottmontminy]

Make sure your .grid__item elements are always children of a .grid, even when you're nesting.

Also, because this framework uses inline-block for laying out .grid__items, you have to comment out whitespace between .grid__items otherwise the inherent whitespace between inline-block elements will create unwanted gutter space inbetween.

This page has some nesting examples: http://csswizardry.com/csswizardry-grids/. Check out the source for Grid 2.1 - Grid 2.5.

Here's a simple example:

<div class="grid">
    <div class="grid__item  one-half">
        <div class="grid">
            <div class="grid__item  one-third"></div><!--
         --><div class="grid__item  one-third"></div><!--
         --><div class="grid__item  one-third"></div>
        </div>
    </div><!--
 --><div class="grid__item  one-half">
        <div class="grid">
            <div class="grid__item  one-third"></div><!--
         --><div class="grid__item  one-third"></div><!--
         --><div class="grid__item  one-third"></div>
        </div>
    </div>
</div>

[nicbou]

I am here because I was not able to find any relevant examples either. Perhaps it would make sense to include this right in the readme.