Плавающие элементы css с неравной высотой влево и вверх в сетке

Мне интересно, как я могу добиться эффекта, показанного на рисунке 1.

На данный момент у меня есть

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

Это дает мне результат, показанный на рисунке 2. (Обратите внимание :Я знаю, что могу сделать то же самое с float :left)

Мой HTML-код выглядит примерно так:

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

Я хочу, чтобы каждый элемент плавал как можно дальше влево, но при этом плавал вверх.

Можно ли это сделать на чистом css или нужен javascript?

РЕДАКТИРОВАТЬ:

Для меня важно, чтобы вся сетка располагалась по центру страницы. Вот почему я использую блок display :inline -. Сетка также не должна быть привязана к странице, потому что я хочу, чтобы она менялась при изменении размера окна.