title: css float elements with unequal heights left and up in grid
body: <p>I'm wondering how I can accomplish the effect in figure 1.</p>
  
  <p><img src="https://i.stack.imgur.com/LTJy6.png" alt="Float left up"></p>
  
  <p>What I have got so far is </p>
  
  <p><code>
  .box { display: inline-block; vertical-align: top; width: 100px;}
  </code></p>
  
  <p>This gives me the result illustrated in figure 2.
  (Notice: I'm aware I can accomplish the same with float: left)</p>
  
  <p>My HTML code looks something like this:</p>
  
  <pre><code>&lt;span class="box"&gt;A&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/span&gt;
  &lt;span class="box"&gt;B&lt;br&gt;&lt;/span&gt;
  &lt;span class="box"&gt;C&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/span&gt;
  &lt;span class="box"&gt;D&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/span&gt;
  &lt;span class="box"&gt;E&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/span&gt;
  &lt;span class="box"&gt;F&lt;/span&gt;
  &lt;span class="box"&gt;G&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/span&gt;
  &lt;span class="box"&gt;H&lt;br&gt;&lt;/span&gt;
  &lt;span class="box"&gt;I&lt;br&gt;&lt;br&gt;&lt;/span&gt;
  </code></pre>
  
  <p>I want every element to be floated to the left as far as possible, but meanwhile floating upwards.</p>
  
  <p>Is it possible to do this with pure css, or will i need some javascript?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>It is important for me that the entire grid is positioned to the center of the page. That's why I use display:inline-block. The grid should also not be fixed to the page because I want it to reflow when I resize my window.</p>