Responsive Grid System se presenta como la forma más rápida de crear webs sensibles/adaptables a cualquier resolución de pantalla (Desktops, tablets, smartphones).

No está limitado a trabajar con grillas de sólo 12, 16 o 24 columnas, sino que nos permite utilizar las que se necesiten, adaptándose fácilmente a cualquier resolución ya que utiliza porcentajes incluso en los márgenes entre columnas, consiguiendo así, que la grilla se adapte al contenido y no al revés. Win!

Ejemplo Práctico:

HTML:

<div class="section group">
    <div class="col span_1_of_3">This is column 1</div>
    <div class="col span_1_of_3">This is column 2</div>
    <div class="col span_1_of_3">This is column 3</div>
</div>
<div class="section group">
    <div class="col span_1_of_4">This is column 1</div>
    <div class="col span_1_of_4">This is column 2</div>
    <div class="col span_1_of_4">This is column 3</div>
    <div class="col span_1_of_4">This is column 4</div>
</div>

CSS:

/*  SECTIONS  */
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}
.col:first-child { 
    margin-left: 0;
}

/*  GRID OF THREE  */
.span_3_of_3 {
    width: 100%;
}
.span_2_of_3 {
    width: 66.1%;
}
.span_1_of_3 {
    width: 32.2%;
}

/*  GRID OF FOUR  */
.span_4_of_4 {
    width: 100%;
}
.span_3_of_4 {
    width: 74.6%;
}
.span_2_of_4 {
    width: 49.2%;
}
.span_1_of_4 {
    width: 23.8%;
}

/*  GROUPING  */
.group:before, .group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}

Puedes ver un ejemplo con varias columnas en este enlace

Enlace: Responsive Grid System