title: Laying out many divs horizontally but for lower rows to fill in tight below first row
body: <p>I'm trying to layout a grid of div's (they contain image and text) of varying size. I'd like them to flow from left to right but for the lower ones to come in tight below the higher items. I'm having a hard time describing this to I've included a drawing of what I'd like to achieve, the numbers represent the order of the divs.
  <img src="https://i.stack.imgur.com/QmgBf.jpg" alt="enter image description here"></p>
  
  <p>I've seen this in use and it appears all the divs are placed using absolute positioning. </p>
  
  <p>Does anyone know how this layout can be achieved? I'm attempting to build a site that will work on web/tab/phone so the solution should be able to work across all platforms. </p>