Search code examples
htmlcssresponsive-designmaterialize

How to stack cards responsively with Materialize CSS?

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).

Unfortunately, I can't manage for them to stack vertically without gaps, even though their width is the same: https://jsfiddle.net/wdvq57rp/.

Large Layout Gaps -> Image

.card-panel {
  margin: 10px;
  padding: 10px;
}

.container {
  margin: 0;
  max-width: 100%;
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<div class="container">
  <h1>Stacked-Cards Test</h1>

  <div class="row card-container">

    <!-- Test Cards -->
    <div class="col l3 m6 s12">
      <div class="card-panel grey lighten-4">
        <h5>Title</h5>
        <p>Description</p>
        <div>
          <p><a href="#" class="pink-text text-accent2">Link!</a></p>
          <p><a href="#" class="pink-text text-accent2">Link!</a></p>
          <p><a href="#" class="pink-text text-accent2">Link!</a></p>
          <p><a href="#" class="pink-text text-accent2">Link!</a></p>
        </div>
      </div>
    </div>

    <div class="col l3 m6 s12">
      <div class="card-panel grey lighten-4">
        <h5>Title</h5>
        <p>Description</p>
        <div>
          <p><a href="#" class="pink-text text-accent2">Link!</a></p>
        </div>
      </div>
    </div>

    <div class="col l3 m6 s12">
      <div class="card-panel grey lighten-4">
        <h5>Title</h5>
        <p>Description</p>
        <div>
          <p><a href="#" class="pink-text text-accent2">Link!</a></p>
          <p><a href="#" class="pink-text text-accent2">Link!</a></p>
        </div>
      </div>
    </div>

    <div class="col l3 m6 s12">
      <div class="card-panel grey lighten-4">
        <h5>Title</h5>
        <p>Description</p>
        <div>
          <p><a href="#" class="pink-text text-accent2">Link!</a></p>
        </div>
      </div>
    </div>

    <div class="col l3 m6 s12">
      <div class="card-panel grey lighten-4">
        <h5>Title</h5>
        <p>Description</p>
        <div>
          <p><a href="#" class="pink-text text-accent2">Link!</a></p>
          <p><a href="#" class="pink-text text-accent2">Link!</a></p>
          <p><a href="#" class="pink-text text-accent2">Link!</a></p>
        </div>
      </div>
    </div>

    <div class="col l3 m6 s12">
      <div class="card-panel grey lighten-4">
        <h5>Title</h5>
        <p>Description</p>
        <div>
          <p><a href="#" class="pink-text text-accent2">Link!</a></p>
        </div>
      </div>
    </div>


  </div>
  <!-- Row Container with Cards END-->

</div>
<!-- Main Container END-->

<!-- JS Imports -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="./js/magic.js"></script>

Solution

  • Finally found out what I wanted to achieve is possible with column-width & column-gap: https://jsfiddle.net/wdvq57rp/4/

    div.card-container {
  -moz-column-width: 23rem;
  -webkit-column-width: 23rem;
  -moz-column-gap: 1rem;
  -webkit-column-gap: 1rem;
}

.card-panel {
  display: inline-block;
  width: 100%;
}
    <!DOCTYPE html>
<html>

<head>
  <title>Stacked-Cards Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="utf-8">

  <!-- CSS Imports -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css">
  <link rel="stylesheet" href="./css/style.css">

  <!-- Fonts Imports -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>

  <h1>Stacked-Cards Test</h1>

  <!-- Card Container -->
  <div class="row card-container">


    <div class="card-panel">
      <h5 id="title">Title</h5>
      <p id="description">Description</p>
      <div>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
      </div>
    </div>

    <div class="card-panel">
      <h5 id="title">Title</h5>
      <p id="description">Description</p>
      <div>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
      </div>
    </div>

    <div class="card-panel">
      <h5 id="title">Title</h5>
      <p id="description">Description</p>
      <div>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
      </div>
    </div>

    <div class="card-panel">
      <h5 id="title">Title</h5>
      <p id="description">Description</p>
      <div>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
      </div>
    </div>

    <div class="card-panel">
      <h5 id="title">Title</h5>
      <p id="description">Description</p>
      <div>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
      </div>
    </div>

    <div class="card-panel">
      <h5 id="title">Title</h5>
      <p id="description">Description</p>
      <div>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
      </div>
    </div>

    <div class="card-panel">
      <h5 id="title">Title</h5>
      <p id="description">Description</p>
      <div>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
      </div>
    </div>

    <div class="card-panel">
      <h5 id="title">Title</h5>
      <p id="description">Description</p>
      <div>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
      </div>
    </div>

    <div class="card-panel">
      <h5 id="title">Title</h5>
      <p id="description">Description</p>
      <div>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
      </div>
    </div>

  </div>
  <!-- Card Container END -->

  <!-- JS Imports -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
</body>

</html>