fluid css grid framework

by kachibito

HTML

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

CSS

.span-1  { width:6.25%;   }
.span-2  { width:14.583%; }
.span-3  { width:22.917%; }
.span-4  { width:31.25%;  }
.span-5  { width:39.667%; }
.span-6  { width:47.917%; }
.span-7  { width:56.23%;  }
.span-8  { width:64.583%; }
.span-9  { width:72.917%; }
.span-10 { width:81.25%;  }
.span-11 { width:89.583%; }
.span-12 { width:97.917%; }

.column {
        float: left;
        margin: 0 1.04%;
}

.row {
        width: 97.875%;
        min-width: 100%;
        margin: 0 1.064%;
}

.row .row {
        display: inline-block;
        margin: 0 -1.064%;
        overflow:hidden;
        margin-bottom:5px;
}

div div div div{background:#eee;padding:3px 0;}
div div div div div{background:#ddd;}