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.