While working on our style guide, we wrote a quick mixin to spit out the classes we'd use to demonstrate the use of the grid to designers. These classes wouldn't be used in production code but quickly give us a grey-box version of what the grid system would produce as a handy reference for designers and front-enders. We use Singularity for the g…

grid-demo.scss

/*------------------------------------*\
    $GRID
\*------------------------------------*/

@import 'singularitygs';

$grid: 12;
$gutters: 1/5;

$grid-demos: 12 6 4 3 2 1; /* based on a 12-col symmetrical grid, what rows to show as examples */

@each $demo in $grid-demos {
    $offset: 1;
    $span: $grid/$demo;
    @for $i from 1 through $demo {
        .column--#{$i}of#{$demo} {
            @if $i==1 {
                @include grid-span($span);
            } @else {
                @include grid-span($span, $offset);
            }
        }

        $offset: $offset + $span;
    }
}

grid-fragment.html

            <section class="container">
                <div class="row">
                    <div class="column--1of12"></div>
                    <div class="column--2of12"></div>
                    <div class="column--3of12"></div>
                    <div class="column--4of12"></div>
                    <div class="column--5of12"></div>
                    <div class="column--6of12"></div>
                    <div class="column--7of12"></div>
                    <div class="column--8of12"></div>
                    <div class="column--9of12"></div>
                    <div class="column--10of12"></div>
                    <div class="column--11of12"></div>
                    <div class="column--12of12"></div>
                </div>

                <div class="row">
                    <div class="column--1of6"></div>
                    <div class="column--2of6"></div>
                    <div class="column--3of6"></div>
                    <div class="column--4of6"></div>
                    <div class="column--5of6"></div>
                    <div class="column--6of6"></div>
                </div>

                <div class="row">
                    <div class="column--1of4"></div>
                    <div class="column--2of4"></div>
                    <div class="column--3of4"></div>
                    <div class="column--4of4"></div>
                </div>

                <div class="row">
                    <div class="column--1of3"></div>
                    <div class="column--2of3"></div>
                    <div class="column--3of3"></div>
                </div>

                <div class="row">
                    <div class="column--1of2"></div>
                    <div class="column--2of2"></div>
                </div>

                <div class="row">
                    <div class="column--1of1"></div>
                </div>
            </section>