如何在Vue Material中设置灵活的网格

我正在尝试构建一个使用 Vue-Material 在网格中渲染用户输入的卡片的界面。卡片正确渲染。然而，我希望我的网格能够以消除间隙的方式弯曲、对齐和交错不同尺寸的卡片，如下所示：

下面的代码与上面的网格相对应：

<template>
  <div class="content">
    <div class="md-layout">
      <div
        v-for="post in posts.slice().reverse()" :key="post.id"
        class="md-layout-item md-size-20 md-xsmall-size-100"
      >
        <md-card>
          <md-card-content v-if="post.downloadUrl">
            <md-card-media>
              <img :src="post.downloadUrl" style="width: 100%"/>
            </md-card-media><br>
            <p>{{ post.content }}</p>
            <p>{{ post.timestamp | moment }}</p>
          </md-card-content>

          <md-card-content v-else>
            <p>{{ post.content }}</p>
            <p>{{ post.timestamp | moment }}</p>
          </md-card-content>
          <md-card-actions>
            <md-button class="md-icon-button md-info">
              <md-icon>favorite</md-icon>
            </md-button>
            <md-button class="md-icon-button md-info">
              <md-icon>share</md-icon>
            </md-button>
          </md-card-actions>
        </md-card>
      </div>
    </div>
  </div>
</template>

我如何配置此 Vue-Material 布局以消除这些间隙的方式排列卡片？谢谢！

例子#3

你可以使用vue-masonry plugin.

npm i vue-masonry

See it working。 沙盒here.