title: Materialize css cards with same width but different heights
body: <p>I'm trying to build a screen that show several cards with different heights, but once they have different heights, they send it to the down of the highest one like this: <a href="http://i.stack.imgur.com/VMepP.jpg" rel="nofollow">result</a></p>
  
  <p>but i want to fit at the next one it should right below it, like this: <a href="http://i.stack.imgur.com/tyIFY.jpg" rel="nofollow">desired result</a></p>
  
  <p>My structure for this is easy:</p>
  
  <pre><code>&lt;body&gt;
      &lt;main&gt;
          &lt;div class="section"&gt;
              &lt;div class="row container"&gt;
                  &lt;div class="col s12 m6 l4"&gt;CARD&lt;/div&gt;
                  &lt;div class="col s12 m6 l4"&gt;CARD&lt;/div&gt;
                  &lt;div class="col s12 m6 l4"&gt;CARD&lt;/div&gt;
                  &lt;div class="col s12 m6 l4"&gt;CARD&lt;/div&gt;
                  &lt;div class="col s12 m6 l4"&gt;CARD&lt;/div&gt;
                  &lt;div class="col s12 m6 l4"&gt;CARD&lt;/div&gt;
                  &lt;div class="col s12 m6 l4"&gt;CARD&lt;/div&gt;
                  &lt;div class="col s12 m6 l4"&gt;CARD&lt;/div&gt;
                  &lt;div class="col s12 m6 l4"&gt;CARD&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/main&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I've tried using floats at the cols divs but nothing worked out...
  Does anybody knows how to make something like i want? Thanks.</p>