title: Pinterest Layout With Angular Material
body: <p>I need the following layout for <a href="https://material.angularjs.org/latest/" rel="noreferrer">Angular Material</a> were the cards are inserted from left to right, wrap at the end of the available width and fill out any vertical space between cards. All cards have the same width, but different height:</p>
  
  <p><a href="https://i.stack.imgur.com/iVOoM.png" rel="noreferrer"><img src="https://i.stack.imgur.com/iVOoM.png" alt="enter image description here"></a></p>
  
  <p><strong>Is this possible with plain angular and CSS? How?</strong></p>
  
  <hr>
  
  <p>I tried to accomplish this with <code>display:flex</code> but I couldn't get rid of the vertical space:</p>
  
  <pre><code>.cards {
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ZnR8Z.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ZnR8Z.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p>I also found a pure CSS solution, which works out the space problem, but has different order and also requires a fixed height:
  <a href="https://codepen.io/michellebarker/pen/zvxpoG" rel="noreferrer">https://codepen.io/michellebarker/pen/zvxpoG</a></p>
  
  <p><a href="https://i.stack.imgur.com/YBkzw.png" rel="noreferrer"><img src="https://i.stack.imgur.com/YBkzw.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <h1>Update</h1>
  
  <p><strong>Additional requirements:</strong></p>
  
  <ul>
  <li>Responsive layout: Depending on window with, there are fewer or more columns; but they always fill out all available space (adaptive column width, e.g. 100%, 50%, etc)</li>
  <li>The insertion of the cards must work with <code>ng-repeat="card in cards | orderBy:order:reverse"</code></li>
  </ul>