I am working on a project where I am using Vue-Material to display user-inputted cards in a grid layout. While the cards are rendering correctly, I want to optimize the grid to make it flexible, justify the cards, and stagger them in a way that eliminates any gaps between them. This is what I aim to achieve:
https://i.sstatic.net/Ou7Ec.jpg
The code snippet below corresponds to the grid layout shown above:
<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>
Any suggestions on how I can tweak my Vue-Material setup to achieve a gap-free arrangement of the cards? Your input is greatly appreciated!
https://i.sstatic.net/m4NvW.jpg
Example #3