Модульная сетка для верстки

/*
...
    <div class="grid-12 center-block">
        ...
        <div class="row">
            <div class="span-4">Left Column</div>
            <div class="span-8">Right Column</div>
        </div>
        ...
    </div>
...
*/

body {
    line-height: 1;
    margin: 0;
}

img {
    border: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

textarea {
    display: block;
    resize: none;
}

:focus {
    outline: 0;
}

.center-block {
    margin: auto;
}

.clearfix {
    clear: both;
}

.grid-2 {
    width: 180px;
}

.grid-3 {
    width: 260px;
}

.grid-4 {
    width: 340px;
}

.grid-5 {
    width: 420px;
}

.grid-6 {
    width: 500px;
}

.grid-7 {
    width: 580px;
}

.grid-8 {
    width: 660px;
}

.grid-9 {
    width: 740px;
}

.grid-10 {
    width: 820px;
}

.grid-11 {
    width: 900px;
}

.grid-12 {
    width: 980px;
}

.row {
    overflow: hidden;
    padding: 0 20px;
}

[class*='span-'] {
    float: left;
    margin-right: 20px;
}

.row > [class*='span-']:last-child {
    margin-right: 0;
}

.span-1 {
    width: 60px;
}

.append-1 {
    margin-left: 80px;
}

.span-2 {
    width: 140px;
}

.append-2 {
    margin-left: 160px;
}

.span-3 {
    width: 220px;
}

.append-3 {
    margin-left: 240px;
}

.span-4 {
    width: 300px;
}

.append-4 {
    margin-left: 320px;
}

.span-5 {
    width: 380px;
}

.append-5 {
    margin-left: 400px;
}

.span-6 {
    width: 460px;
}

.append-6 {
    margin-left: 480px;
}

.span-7 {
    width: 540px;
}

.append-7 {
    margin-left: 560px;
}

.span-8 {
    width: 620px;
}

.append-8 {
    margin-left: 640px;
}

.span-9 {
    width: 700px;
}

.append-9 {
    margin-left: 720px;
}

.span-10 {
    width: 780px;
}

.append-10 {
    margin-left: 800px;
}

.span-11 {
    width: 860px;
}

.append-11 {
    margin-left: 880px;
}