Zastanawiam się, jak mogę osiągnąć efekt na rysunku 1.

Co mam do tej pory to

.box { display: inline-block; vertical-align: top; width: 100px;}

Daje mi to wynik zilustrowany na rysunku 2. (Uwaga: zdaję sobie sprawę, że mogę to samo zrobić z pływakiem: w lewo)

Mój kod HTML wygląda mniej więcej tak:

<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>

Chcę, aby każdy element unosił się jak najdalej w lewo, a tymczasem unosił się w górę.

Czy można to zrobić za pomocą czystego css, czy też potrzebuję jakiegoś javascript?

EDYTOWAĆ:

Ważne jest dla mnie, aby cała siatka znajdowała się na środku strony. Dlatego używam wyświetlacza: inline-block. Siatka nie powinna być również przymocowana do strony, ponieważ chcę, aby powracała do niej po zmianie rozmiaru okna.