Ordenando div uno de bajo de otro sin espacios

[RUX]

Buenas, a ver si alguien me puede echar un cable con esto:

Necesito que lo siguiente:


...se vea como:

El código que actualmente tengo es el siguiente:

Código CSS:

<style>
    .caja{
        display:inline-block;
        background:green;
        height:100px;
        width:100px;
        margin-bottom:5px;
        vertical-align:top;
    }
 
    .caja2{
        background:blue;
        height:140px;
    }
 
</style>
 

Código HTML:

<div class="principal">
 
    <div class="caja"></div>
    <div class="caja"></div>
    <div class="caja"></div>
    <div class="caja"></div>
    <div class="caja caja2"></div>
    <div class="caja"></div>
    <div class="caja"></div>
    <div class="caja caja2"></div>
    <div class="caja"></div>
    <div class="caja caja2"></div>
    <div class="caja"></div>
    <div class="caja"></div>
    <div class="caja"></div>
    <div class="caja"></div>
    <div class="caja caja2"></div>
    <div class="caja"></div>
 
</div>
 

Muchas gracias de antemano.
Un saludo

[MrGilbertMan]

Se puede hacer con jquery

http://hongkhanh.github.io/gridify/

Un saludo.

[andresgarciadev]

nada, como te dice el anterior comentario no hay forma sino es con jquery, de lo contrario la unica manera es que los imprimar verticalmente envez de horizontalmente

[RUX]

Me lo estaba suponiendo, muchísimas gracias chicos.

[pzin]

Puedes usar columnas de CSS o flexbox. Aunque cada una tienes sus cosas.

Alternativamente una buena librería JavaScript para esto es Isotope. Luego hay otras como masonry, salvattore o savvior.