A fluid grid system for responsive layout.

fluid-grid-system.css

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.box {
    margin: 0 -1%;
    overflow: hidden;
}
.box > div {
    float: left;
    margin: 1%;
    padding: 1%;
    width: 98%;
}
.box .box12 {
    width: 98%;
}
.box .box8 {
    width: 64.6667%;
}
.box .box6 {
    width: 48%;
}
.box .box4 {
    width: 31.3333%;   
}
.box .box3 {
    width: 23%;
}
.box .box2 {
    width: 14.6666%;
}
.box .box1 {
    width: 6.3333%;
}

@media screen and (max-width: 940px) {
    .box .box8,
    .box .box6,
    .box .box4 {
        width: 98%;
    }
    .box .box3,
    .box .box2,
    .box .box1 {
        width: 48%;
    }
}
@media screen and (max-width: 480px) {
    .box .box8,
    .box .box6,
    .box .box4,
    .box .box3,
    .box .box2,
    .box .box1 {
        width: 98%;
    } 
}

fluid-grid-system.html

<div class="box">
    <div class="box12">Box 12</div>
    <div class="box6">Box 6</div>
    <div class="box6">Box 6</div>
    <div class="box4">Box 4</div>
    <div class="box4">Box 4</div>
    <div class="box4">Box 4</div>
    <div class="box3">Box 3</div>
    <div class="box3">Box 3</div>
    <div class="box3">Box 3</div>
    <div class="box3">Box 3</div>
    <div class="box2">Box 2</div>
    <div class="box2">Box 2</div>
    <div class="box2">Box 2</div>
    <div class="box2">Box 2</div>
    <div class="box2">Box 2</div>
    <div class="box2">Box 2</div>
    <div class="box1">Box 1</div>
    <div class="box1">Box 1</div>
    <div class="box1">Box 1</div>
    <div class="box1">Box 1</div>
    <div class="box1">Box 1</div>
    <div class="box1">Box 1</div>
    <div class="box1">Box 1</div>
    <div class="box1">Box 1</div>
    <div class="box1">Box 1</div>
    <div class="box1">Box 1</div>
    <div class="box1">Box 1</div>
    <div class="box1">Box 1</div>
</div>