Minimal Grid System

Inspired from Zurb Foundation's grid.

by makzan

HTML

<div class='row'>
    <div class='four col'>
        <img src='http://placehold.it/800x300.png' />
    </div>
</div>
<div class="row">
    <div class='two col'>
        <img src='http://placehold.it/400x300.png' />
        <div class='row'>
            <div class='one col'> <img src='http://placehold.it/100x400.png' /></div>
            <div class='one col'> <img src='http://placehold.it/100x400.png' /></div>
            <div class='two col'> 
                <img src='http://placehold.it/200x200.png' />
                <div class='row'>
                    <div class='two col'> 
                        <img src='http://placehold.it/200x200.png' />  
                    </div>
                    <div class='two col'> 
                        <img src='http://placehold.it/200x200.png' />  
                    </div>
                </div> 
            </div>           
        </div>                   
    </div>
    <div class='two col'>
        <img src='http://placehold.it/400x500.png' />
    </div>    
</div>
<div class="row">
    <div class='four col'>
        <img src='http://placehold.it/400x100.png&text=Footer' />
    </div>
</div>

CSS

* {
    box-sizing: border-box;    
}

img {
    max-width: 100%;
}

.row {
    width: 600px;
    max-width: 100%;
    margin: auto;

    overflow: auto;
}
.row .row {
    width: auto;
    max-width: none;
    margin: 0 -5px;
}
.col {
    float:left;

    padding: 0 5px;
}
.one {
    width: 25%;
}
.two {
    width: 50%;
}
.three {
    width: 75%;
}
.four {
    width: 100%;
}

@media screen and (max-width: 400px) {
    .col {
        width: 100%;
    }
}