title: How to stack cards responsively with Materialize CSS?
body: <p>I'm trying to build a layout in Materialize CSS with many cards that fall into a responsive layout: Four cards in large displays (col l3), two in medium (col m6), and one in small (col s12).</p>
  <p>Unfortunately, I can't manage for them to stack vertically without gaps, even though their width is the same: <a href="https://jsfiddle.net/wdvq57rp/" rel="nofollow noreferrer">https://jsfiddle.net/wdvq57rp/</a>.</p>
  <p><a href="https://i.stack.imgur.com/X2Cw6.png" rel="nofollow noreferrer">Large Layout Gaps -&gt; Image</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.card-panel {
    margin: 10px;
    padding: 10px;
  }
  
  .container {
    margin: 0;
    max-width: 100%;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/&gt;
  &lt;div class="container"&gt;
    &lt;h1&gt;Stacked-Cards Test&lt;/h1&gt;
  
    &lt;div class="row card-container"&gt;
  
      &lt;!-- Test Cards --&gt;
      &lt;div class="col l3 m6 s12"&gt;
        &lt;div class="card-panel grey lighten-4"&gt;
          &lt;h5&gt;Title&lt;/h5&gt;
          &lt;p&gt;Description&lt;/p&gt;
          &lt;div&gt;
            &lt;p&gt;&lt;a href="#" class="pink-text text-accent2"&gt;Link!&lt;/a&gt;&lt;/p&gt;
            &lt;p&gt;&lt;a href="#" class="pink-text text-accent2"&gt;Link!&lt;/a&gt;&lt;/p&gt;
            &lt;p&gt;&lt;a href="#" class="pink-text text-accent2"&gt;Link!&lt;/a&gt;&lt;/p&gt;
            &lt;p&gt;&lt;a href="#" class="pink-text text-accent2"&gt;Link!&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col l3 m6 s12"&gt;
        &lt;div class="card-panel grey lighten-4"&gt;
          &lt;h5&gt;Title&lt;/h5&gt;
          &lt;p&gt;Description&lt;/p&gt;
          &lt;div&gt;
            &lt;p&gt;&lt;a href="#" class="pink-text text-accent2"&gt;Link!&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col l3 m6 s12"&gt;
        &lt;div class="card-panel grey lighten-4"&gt;
          &lt;h5&gt;Title&lt;/h5&gt;
          &lt;p&gt;Description&lt;/p&gt;
          &lt;div&gt;
            &lt;p&gt;&lt;a href="#" class="pink-text text-accent2"&gt;Link!&lt;/a&gt;&lt;/p&gt;
            &lt;p&gt;&lt;a href="#" class="pink-text text-accent2"&gt;Link!&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col l3 m6 s12"&gt;
        &lt;div class="card-panel grey lighten-4"&gt;
          &lt;h5&gt;Title&lt;/h5&gt;
          &lt;p&gt;Description&lt;/p&gt;
          &lt;div&gt;
            &lt;p&gt;&lt;a href="#" class="pink-text text-accent2"&gt;Link!&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col l3 m6 s12"&gt;
        &lt;div class="card-panel grey lighten-4"&gt;
          &lt;h5&gt;Title&lt;/h5&gt;
          &lt;p&gt;Description&lt;/p&gt;
          &lt;div&gt;
            &lt;p&gt;&lt;a href="#" class="pink-text text-accent2"&gt;Link!&lt;/a&gt;&lt;/p&gt;
            &lt;p&gt;&lt;a href="#" class="pink-text text-accent2"&gt;Link!&lt;/a&gt;&lt;/p&gt;
            &lt;p&gt;&lt;a href="#" class="pink-text text-accent2"&gt;Link!&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col l3 m6 s12"&gt;
        &lt;div class="card-panel grey lighten-4"&gt;
          &lt;h5&gt;Title&lt;/h5&gt;
          &lt;p&gt;Description&lt;/p&gt;
          &lt;div&gt;
            &lt;p&gt;&lt;a href="#" class="pink-text text-accent2"&gt;Link!&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
    &lt;/div&gt;
    &lt;!-- Row Container with Cards END--&gt;
  
  &lt;/div&gt;
  &lt;!-- Main Container END--&gt;
  
  &lt;!-- JS Imports --&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"&gt;&lt;/script&gt;
  &lt;script src="./js/magic.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>