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