Untitled

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Grid Prototype</title>
    <style>
        body { margin:0; }
        div { text-align:center; background:rgba(0,0,0,0.2); }

        .grid-container { width:960px; margin:0 auto 5px; *zoom:1; }
        .grid-container:after { content:""; display:table; clear:both; }

        .grid-1,
        .grid-2,
        .grid-3,
        .grid-4,
        .grid-5,
        .grid-6,
        .grid-7,
        .grid-8,
        .grid-9,
        .grid-10,
        .grid-11,
        .grid-12 { float:left; margin:0 0 0 1px; *display:inline; }

        .grid-1 { width:79px; }
        .grid-2 { width:159px; }
        .grid-3 { width:239px; }
        .grid-4 { width:319px; }
        .grid-5 { width:399px; }
        .grid-6 { width:479px; }
        .grid-7 { width:559px; }
        .grid-8 { width:639px; }
        .grid-9 { width:719px;  }
        .grid-10 { width:799px; }
        .grid-11 { width:879px; }
        .grid-12 { width:960px; }

        .grid-1.gutter-right { width:69px; margin-right:10px; }
        .grid-2.gutter-right { width:149px; margin-right:10px; }
        .grid-3.gutter-right { width:229px; margin-right:10px; }
        .grid-4.gutter-right { width:309px; margin-right:10px; }
        .grid-5.gutter-right { width:389px; margin-right:10px; }
        .grid-6.gutter-right { width:469px; margin-right:10px; }
        .grid-7.gutter-right { width:549px; margin-right:10px; }
        .grid-8.gutter-right { width:629px; margin-right:10px; }
        .grid-9.gutter-right { width:709px; margin-right:10px;  }
        .grid-10.gutter-right { width:789px; margin-right:10px; }
        .grid-11.gutter-right { width:869px; margin-right:10px; }

        .grid-1.gutter-left { width:69px; margin-left:11px; }
        .grid-2.gutter-left { width:149px; margin-left:11px; }
        .grid-3.gutter-left { width:229px; margin-left:11px; }
        .grid-4.gutter-left { width:309px; margin-left:11px; }
        .grid-5.gutter-left { width:389px; margin-left:11px; }
        .grid-6.gutter-left { width:469px; margin-left:11px; }
        .grid-7.gutter-left { width:549px; margin-left:11px; }
        .grid-8.gutter-left { width:629px; margin-left:11px; }
        .grid-9.gutter-left { width:709px; margin-left:11px;  }
        .grid-10.gutter-left { width:789px; margin-left:11px; }
        .grid-11.gutter-left { width:869px; margin-left:11px; }

        .first { margin-left:0; }
    </style>
</head>
<body>

    <div class="grid-container">
        <div class="grid-1 first">1</div>
        <div class="grid-1">1</div>
        <div class="grid-1">1</div>
        <div class="grid-1">1</div>
        <div class="grid-1">1</div>
        <div class="grid-1">1</div>
        <div class="grid-1">1</div>
        <div class="grid-1">1</div>
        <div class="grid-1">1</div>
        <div class="grid-1">1</div>
        <div class="grid-1">1</div>
        <div class="grid-1">1</div>
    </div>

    <div class="grid-container">
        <div class="grid-1 first">1</div>
        <div class="grid-11">11</div>
    </div>

    <div class="grid-container">
        <div class="grid-2 first">2</div>
        <div class="grid-10">10</div>
    </div>

    <div class="grid-container">
        <div class="grid-3 first">3</div>
        <div class="grid-9">9</div>
    </div>

    <div class="grid-container">
        <div class="grid-4 first">4</div>
        <div class="grid-8">8</div>
    </div>

    <div class="grid-container">
        <div class="grid-5 first">5</div>
        <div class="grid-7">7</div>
    </div>

    <div class="grid-container">
        <div class="grid-6 first">6</div>
        <div class="grid-6">6</div>
    </div>

    <!-- right gutter -->

    <div class="grid-container">
        <div class="grid-1 gutter-right first">1</div>
        <div class="grid-11">11</div>
    </div>

    <div class="grid-container">
        <div class="grid-2 gutter-right first">2</div>
        <div class="grid-10">10</div>
    </div>

    <div class="grid-container">
        <div class="grid-3 gutter-right first">3</div>
        <div class="grid-9">9</div>
    </div>

    <div class="grid-container">
        <div class="grid-4 gutter-right first">4</div>
        <div class="grid-8">8</div>
    </div>

    <div class="grid-container">
        <div class="grid-5 gutter-right first">5</div>
        <div class="grid-7">7</div>
    </div>

    <div class="grid-container">
        <div class="grid-6 gutter-right first">6</div>
        <div class="grid-6">6</div>
    </div>

    <!-- left gutter -->

    <div class="grid-container">
        <div class="grid-1 first">1</div>
        <div class="grid-11 gutter-left">11</div>
    </div>

    <div class="grid-container">
        <div class="grid-2 first">2</div>
        <div class="grid-10 gutter-left">10</div>
    </div>

    <div class="grid-container">
        <div class="grid-3 first">3</div>
        <div class="grid-9 gutter-left">9</div>
    </div>

    <div class="grid-container">
        <div class="grid-4 first">4</div>
        <div class="grid-8 gutter-left">8</div>
    </div>

    <div class="grid-container">
        <div class="grid-5 first">5</div>
        <div class="grid-7 gutter-left">7</div>
    </div>

    <div class="grid-container">
        <div class="grid-6 first">6</div>
        <div class="grid-6 gutter-left">6</div>
    </div>

    <div class="grid-container">
        <div class="grid-6 gutter-right first">6</div>
        <div class="grid-6 gutter-left">6</div>
    </div>

</body>
</html>