display:table grid system

(experimental). It's ok that it does not work on ie7

by SebastianPataneMasuelli

HTML

<div class="grid_12"></div>
<hr class="newRow" />
<div class="grid_6"></div><div class="grid_6"></div>
<hr class="newRow" />
<div class="grid_4"></div><div class="grid_4"></div><div class="grid_4"></div>
<hr class="newRow" />
<div class="grid_3"></div><div class="grid_3"></div><div class="grid_3"></div><div class="grid_3"></div>
<hr class="newRow" />
<div class="grid_2"></div><div class="grid_2"></div><div class="grid_2"></div><div class="grid_2"></div><div class="grid_2"></div><div class="grid_2"></div>
<hr class="newRow" />
<div class="grid_1"></div><div class="grid_1"></div><div class="grid_1"></div><div class="grid_1"></div><div class="grid_1"></div><div class="grid_1"></div><div class="grid_1"></div><div class="grid_1"></div><div class="grid_1"></div><div class="grid_1"></div><div class="grid_1"></div><div class="grid_1"></div>
<hr class="newRow" />
<div class="grid_11"></div><div class="grid_1"></div>
<hr class="newRow" />
<div class="grid_10"></div><div class="grid_2"></div>
<hr class="newRow" />
<div class="grid_9"></div><div class="grid_3"></div>
<hr class="newRow" />
<div class="grid_8"></div><div class="grid_4"></div>
<hr class="newRow" />
<div class="grid_7"></div><div class="grid_5"></div>

CSS

/* grid */
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    display: table-cell;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.grid_1 { width: 80px; }
.grid_2 { width: 160px; }
.grid_3 { width: 240px; }
.grid_4 { width: 320px; }
.grid_5 { width: 400px; }
.grid_6 { width: 480px; }
.grid_7 { width: 560px; }
.grid_8 { width: 640px; }
.grid_9 { width: 720px; }
.grid_10 { width: 800px; }
.grid_11 { width: 880px; }
.grid_12 { width: 960px; }

.newRow {height: 0px; border: 0; margin: 0; *clear:left;}

/* demo styles */
body { width: 960px;margin: 0 auto}

div { background-color: lightgray; border: 1px solid white; height: 10px; padding: 10px; }