Système de grille original sur Mapado

Un système de grille fluide (largeur et hauteur) avec une construction originale. Vu sur http://www.mapado.com/lyon/

by oilvier

HTML

<div class="wrap">
    <div class="grids">
        <div class="grid"><div class="item">1</div></div>
        <div class="grid"><div class="item">2</div></div>
        <div class="grid"><div class="item">3</div></div>
        <div class="grid"><div class="item">4</div></div>
        <div class="grid"><div class="item">5</div></div>
        <div class="grid"><div class="item">6</div></div>
    </div>
</div>

CSS

* {box-sizing:border-box;}

.wrap {position: relative; padding-top:50%;}
    .grids {position: absolute; top:0; bottom:0; left:0; right:0;}
        .grid {height: 50%; width: 33.333%; display: inline-block; margin-right:-0.25em; padding:10px;}
            .item {height:100%; text-align: center; background:red; color:#FFF; font-size:25px;}