css elementos de flutuação com alturas desiguais à esquerda e para cima na grade
Eu estou querendo saber como eu posso realizar o efeito na figura 1.
O que eu tenho até agora é
.box { display: inline-block; vertical-align: top; width: 100px;}
Isso me dá o resultado ilustrado na figura 2. (Aviso: Estou ciente de que posso realizar o mesmo com float: left)
Meu código HTML é parecido com isto:
<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>
Eu quero que todos os elementos sejam flutuados para a esquerda o máximo possível, mas enquanto isso flutuando para cima.
É possível fazer isso com CSS puro, ou eu preciso de algum javascript?
EDITAR:
É importante para mim que toda a grade esteja posicionada no centro da página. É por isso que uso o display: inline-block. A grade também não deve ser corrigida na página porque quero que ela reflua quando eu redimensionar minha janela.