Marcos generados con CSS

Hoy te quiero compartir 1kbgrid, un generador de marcos con CSS.
Su utilizacion es tan simple que para hacerlo solo configuras el tamaño de cada uno de los marcos, lo descargas en un archivo zip y listo:



Aquí una muestra original:

p {
    font:60px/100px Helvetica;
    color: #000;
    text-align: center;
    border: 1px solid #000;
    margin: 0 0 20px 0;
}
.grid_1 { width:60px; }
.grid_2 { width:140px; }
.grid_3 { width:220px; }
.grid_4 { width:300px; }
.grid_5 { width:380px; }
.grid_6 { width:460px; }
.grid_7 { width:540px; }
.grid_8 { width:620px; }
.grid_9 { width:700px; }
.grid_10 { width:780px; }
.grid_11 { width:860px; }
.grid_12 { width:940px; }

.column {
 margin: 0 10px;
 overflow: hidden;
 float: left;
 display: inline;
}
.row {
 width: 960px;
 margin: 0 auto;
 overflow: hidden;
}
.row .row {
 margin: 0 -10px;
 width: auto;
 display: inline-block;
}

<div class="row">
<div class="column grid_6"><p>12</p></div>
</div>
<div class="row">
<div class="column grid_4"><p>8</p>
<div class="row">
<div class="column grid_2"><p>4</p></div>
<div class="column grid_2"><p>4</p></div>
</div>
</div>
<div class="column grid_2"><p style="line-height: 222px;">4</p></div>
</div>

.Marcos {
    background-color: #EEE;
    font:40px/100px Helvetica;
    color: #BBB;
    text-align: center;
    border-left: 6px solid #AAA;
    border-top: 6px double #BBB;
    border-right: 10px double #BBB;
    border-bottom: 10px solid #AAA;
    margin: 0 0 6px 0;
}
.linea_1 { width:60px; }
.linea_2 { width:140px; }
.linea_3 { width:220px; }
.linea_4 { width:300px; }
.linea_5 { width:380px; }
.linea_6 { width:460px; }
.linea_7 { width:540px; }
.linea_8 { width:620px; }
.linea_9 { width:700px; }
.linea_10 { width:780px; }
.linea_11 { width:860px; }
.linea_12 { width:940px; }

.columna {
              margin: 0 10px;
 overflow: hidden;
 float: left;
 display: inline;
}
.direccion {
 width: 960px;
 margin: 0 auto;
 overflow: hidden;
}
.direccion .direccion {
 margin: 0 -10px;
 width: auto;
 display: inline-block;
}

<div class="direccion">
<div class="columna linea_6"><div class="Marcos">Marco 1</div></div>
</div>
<div class="direccion">
<div class="columna linea_4"><div class="Marcos">Marco 2</div>
<div class="direccion">
<div class="columna linea_2"><div class="Marcos">Marco 3</div></div>
<div class="columna linea_2"><div class="Marcos">Marco 4</div></div>
</div>
</div>
<div class="columna linea_2"><div class="Marcos" style="line-height: 161px;">Marco 5</div></div>
</div>