Javascript 尝试使用材质设计lite卡创建砌体网格

因此，我正在制作一个应用程序，它有各种材质的、带有图像的、设计简洁的卡片，这些卡片都在一个砖石网格中。我正在使用

massy

模块（）尝试结合

mdl grid

创建一个网格，但是在每张卡的末尾添加了额外的空白，如

我该如何使砌体网格成为一个实际的砌体网格呢？我希望能够删除此底部空间，并将卡放在最后一张下，而不考虑该行中其他卡的高度

我的完整项目可以在上找到，但相关部分在这里，在ejs和css中：

（部分）index.ejs（由express加载）

---

在我看来，

mdl网格

可能正在使用

display:flex

。您可以尝试将其设置为

block

？

。mdl grid{display:block；}

没有执行任何操作

<script src="masonry.pkgd.min.js"></script>
<script>
  let elem = document.querySelector('.masonry-grid');
  let msnry = new Masonry(elem, {
    itemSelector: '.masonry-grid-item'
  });
</script>

<div class="mdl-grid masonry-grid">
  <% files.forEach((bun) => { %>
    <div class="mdl-card mdl-cell mdl-cell--4-col-desktop masonry-grid-item mdl-shadow--2dp">
      <figure class="mdl-card__media">
        <img src=<%= bun.path.replace("public/", "") %> alt="" />
      </figure>
      <div class="mdl-card__title">
        <h3 class="mdl-card__title-text"><%= bun.originalname %></h3>
      </div>
      <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--accent mdl-js-button-mdl-js-ripple-effect" href=<%= bun.path.replace("public/", "") %>>
          View
        </a>
      </div>
    </div>
  <% }); %>
</div>

.masonry-grid {
    max-width: auto;
}

.masonry-grid:after {
    content: '';
    display: block;
    clear: both;
}

.masonry-grid-item {
    /* width: 160px;
    height: 120px; */
    float: left;
}

.mdl-card {
    height: auto;
}

.mdl-card__media {
    margin: 0;
}

.mdl-card__media > img {
    width: 100%;
    height: auto;
}