I 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 can use grid layout:
More on CSS grid: https://developer.mozilla.org/en-US/docs/Web/CSS/grid
ANOTHER SOLUTION
You could use
Andy Barefoot’s solution: https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb (Codepen: https://codepen.io/andybarefoot/pen/QMeZda),
or any from here: https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/
Unfortunately I cannot add it as a snippet – the content is too long, so my answer would be over 30,000 characters.
You could use
vue-masonry
plugin.See it working.
Sandbox here.
Thanks to all who responded today. However, what I needed was a plugin like this: https://www.npmjs.com/package/vue-masonry-css
All I needed to do was embed the v-for loop container and the cards inside the following:
THIS is what I was trying to achieve: