Three and multi columns responsive css layout

One of the best source for a responsive easy adaptable responsive multi column layout is

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

Just a example for a responsive three column layout:


<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>


/* 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):

Column 1
Column 2
Column 3

Get it:

Written by

"Enthusiastic Sim-Racer from the north of germany. I write here about web development, hardware, software and latest motion simulator technologies."