如何在Vue Material中设置灵活的网格 [英] How to set up flexible grid in Vue Material
本文介绍了如何在Vue Material中设置灵活的网格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试构建一个界面，该界面使用 Vue-Material 在网格中呈现用户输入的卡片.卡片渲染正确.但是，我希望我的网格以消除间隙的方式弯曲、对齐和交错不同尺寸的卡片，如下所示:
下面的代码对应上面的网格:
<div class="内容"><div class="md-layout">如何配置此 Vue-Material 布局以消除这些间隙的方式排列卡片?谢谢！
示例 #3
解决方案
你可以使用 vue-masonry 插件.
npm i vue-masonryI am attempting to build an interface that uses Vue-Material to render user-inputted cards in a grid. the cards render properly. However, I want my grid to flex, justify, and stagger the different-sized cards in a way that removes gaps, as seen below:
The following code corresponds with the above grid:
<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>
How can I configure this Vue-Material layout to arrange the cards in a way that removes those gaps? Thanks!
Example #3
解决方案
You could use vue-masonry plugin.
npm i vue-masonry
这篇关于如何在Vue Material中设置灵活的网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
