Diseño de mampostería SOLAMENTE con CSS

Como puede ver en la imagen, cada caja tiene una altura diferente y hay algunas cajas con doble ancho.

Diseño

¿Es posible crear un diseño de mampostería solo con CSS?

Con el soporte css3 puedes hacer esto:

http://jsfiddle.net/huAxS/2/

.container { -moz-column-count: 2; -moz-column-gap: 10px; -webkit-column-count: 2; -webkit-column-gap: 10px; column-count: 2; column-gap: 10px; width: 360px; } .container div { display: inline-block; width: 100%; background-color: red; }​ 

Sin soporte para css3, tienes que recurrir a js desafortunadamente.

Estoy trabajando en un sitio en este momento con el mismo tipo de diseño, dos columnas con el cuadro doble ancho ocasional. Lo que hago es separar el ancho doble del rest del contenido. Por ejemplo:

 

Luego puede aplicar la solución de columna CSS3 a la clase de two-columns . Si necesita admitir IE9, lamentablemente deberá agregar un respaldo de JavaScript .