title: CSS to display html content like Windows 8 Apps Grids
body: <p>I like the look of the grids for Windows Store Apps and trying to recreate this with standard web technique (IE10 and up, FF, Chrome, Safari). Grids in Windows Store Apps scroll vertical and the content is split into Columns that you have to read top down. </p>
  
  <p>So far I have a div that scrolls horizontal with a fixed height:</p>
  
  <pre><code>.scroll-horizontal {    
     overflow-x:scroll;
     overflow-y:hidden;
     white-space: nowrap;
  }
  </code></pre>
  
  <p>This works fine but there is a problem with the child elements warping. They are normally lined up under each other. But I need them to wrap to the next column if the height of the element is reached. Here is a <a href="http://jsfiddle.net/bwwP2/3/" rel="nofollow noreferrer">fiddle example</a> and a image of what I want to archive:
  <img src="https://i.stack.imgur.com/HwkxK.jpg" alt="enter image description here"></p>
  
  <p>How can i get the child elements wrap like a Windows 8 App grid with CSS?    </p>