Ich frage mich, wie ich den Effekt in Abbildung 1 erzielen kann.

Was ich bisher habe, ist

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

Dies gibt mir das in Abbildung 2 dargestellte Ergebnis. (Hinweis: Mir ist bewusst, dass ich dasselbe mit float erreichen kann: left)

Mein HTML-Code sieht ungefähr so ​​aus:

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

Ich möchte, dass jedes Element so weit wie möglich nach links verschoben wird, aber gleichzeitig nach oben.

Ist es möglich, dies mit reinem CSS zu tun, oder benötige ich etwas Javascript?

BEARBEITEN:

Für mich ist es wichtig, dass das gesamte Raster in der Mitte der Seite positioniert ist. Deshalb benutze ich display: inline-block. Das Raster sollte auch nicht an der Seite fixiert sein, da es beim Ändern der Fenstergröße neu fließen soll.