Elementos flotantes css con alturas desiguales a la izquierda y hacia arriba en la cuadrícula
Me pregunto cómo puedo lograr el efecto en la figura 1.
Lo que tengo hasta ahora es
.box { display: inline-block; vertical-align: top; width: 100px;}
Esto me da el resultado ilustrado en la figura 2. (Aviso: soy consciente de que puedo lograr lo mismo con float: izquierda)
Mi código HTML se ve algo como esto:
<span class="box">A<br><br><br><br></span>
<span class="box">B<br></span>
<span class="box">C<br><br><br></span>
<span class="box">D<br><br><br></span>
<span class="box">E<br><br><br><br><br><br></span>
<span class="box">F</span>
<span class="box">G<br><br><br><br></span>
<span class="box">H<br></span>
<span class="box">I<br><br></span>
Quiero que todos los elementos se desplacen hacia la izquierda todo lo posible, pero mientras tanto flotan hacia arriba.
¿Es posible hacer esto con css puro, o necesitaré algún javascript?
EDITAR:
Es importante para mí que toda la cuadrícula esté posicionada en el centro de la página. Es por eso que uso display: inline-block. La cuadrícula tampoco debe estar fija a la página porque quiero que vuelva a funcionar cuando cambie el tamaño de mi ventana.