Three and multi columns responsive css layout

One of the best source for a responsive easy adaptable responsive multi column layout is http://www.responsivegridsystem.com

It´s not a bloated framework, neither a boilerplate or similar. It´s just a little bunch of very smart code to create a responsive div layout. I´ll use it at the frontpage of XSimulator.net.

Just a example for a responsive three column layout:

HTML:

<div class="col span_1_of_3">Column 1</div>
<div class="col span_1_of_3">Column 2</div>
<div class="col span_1_of_3">Column 3</div>

CSS

/* Reset - Responsive first */

.col:first-child {
margin-left: 0;
}
.col {
display: block;
float: left;
margin: 1% 0 1% 1.6%;
}
.span_1_of_3 {
width: 31.7%;
}

/* non responsive */
@media (max-width: 643px) {
.span_1_of_3 {
            width: 100%;
        }
        .col {
            margin: 1% 0 1% 0%;
        }
}

Result: (Scale your browser to see it responsive):

Get it:
http://www.responsivegridsystem.com/