Grid: Nested Grids

Grids are infinitely nestable, allowing for complex layouts. (Grids deeper than 3-4 levels will probably start to look really weird, though.) If a grid is set to be compact, the compact-ness will affect all children grids.

Col 1
Col 2
M-4
M-8
S-6 / M-3
S-6 / M-3
S-6 / M-3
S-6 / M-3
Col 3 
<div class="grid">
    <div class="grid-col grid-col--md-2 grid-col--xl-4">
        Col 1
    </div>
    <div class="grid-col grid-col--md-8 grid-col--xl-4">
        Col 2
        
        <div class="grid">
            <div class="grid-col grid-col--md-4">
               Col 2-1
            </div>

            <div class="grid-col grid-col--md-8">
                Col 2-2

                <div class="grid">
                    <div class="grid-col grid-col--sm-6 grid-col--md-3">
                        Col 2-2-1
                    </div>
                    <div class="grid-col grid-col--sm-6 grid-col--md-3">
                        Col 2-2-2
                    </div>
                    <div class="grid-col grid-col--sm-6 grid-col--md-3">
                        Col 2-2-3
                    </div>
                    <div class="grid-col grid-col--sm-6 grid-col--md-3">
                        Col 2-2-4
                    </div>
                </div>
                    
            </div>

        </div>

    </div>
    <div class="grid-col grid-col--md-2 grid-col--xl-4">
        Col 3
    </div>
</div>