title: Materialize grid with unequal heights
body: <p>I have a grid system built using Materialize with cols of unequal heights (dynamic content).</p>
  
  <p>Each row should have 3 cols. I want each row to start on a new line. However, this is the result I am getting - <a href="https://codepen.io/anon/pen/QaVKyG" rel="nofollow noreferrer">https://codepen.io/anon/pen/QaVKyG</a>. As you can see, the 4th card seem to start at a weird place, leaving lots of white space on the left.</p>
  
  <p>I've tried using flexbox as seen here - <a href="https://codepen.io/anon/pen/rpqLgy" rel="nofollow noreferrer">https://codepen.io/anon/pen/rpqLgy</a></p>
  
  <pre><code>.row { display:flex; flex-wrap: wrap; }
  </code></pre>
  
  <p>However, the problem with this method is that the cols on the last row does not seem to be aligning to the left.</p>
  
  <p>In short, I want the grid to work the same way as it does if I use bootstrap (like this <a href="https://codepen.io/anon/pen/vpVvKv" rel="nofollow noreferrer">https://codepen.io/anon/pen/vpVvKv</a>). As you can see, for bootstrap, cols on the next row starts on the next line, even if the cols have unequal heights. I can't seem to achieve that with Materialize.</p>
  
  <p>Would appreciate any help with either solution (with flexbox or no flexbox). Thanks!</p>