Using vuetify card like bootstrap cards columns - vuejs2

Question

I need a way to use list of v-card from Vuetify like Bootstrap Card Columns
Possible solution:
Pardon me, I couldn't plunkr the code :(
This is what I did.
Update: Unfortunately this messes up with the v-ripple directive
<template>
<v-container grid-list-md>
<div class="v-card-columns">
<v-card tile v-for="post in posts" :key="post.id">
<v-card-title primary-title>
<h3 headline>
{{post.title}}
</h3>
</v-card-title>
<v-card-text>
{{post.body}}
</v-card-text>
</v-card>
</div>
</v-container>
</template>
<script>
import axios from "axios";
export default {
name: "All",
data() {
return {
posts: []
}
},
mounted() {
axios
.get('https://jsonplaceholder.typicode.com/posts')
.then(res => {
this.posts = res.data
})
}
}
</script>
<style scoped>
.v-card-columns .v-card {
margin-bottom: 0.75rem;
}
#media (min-width: 576px) {
.v-card-columns {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 1.25rem;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
orphans: 1;
widows: 1;
}
.v-card-columns .v-card {
display: inline-block;
width: 100%;
}
}
</style>

Answer 1

Pardon me, I couldn't plunkr the code :(
This is what I did.
Update: Unfortunately this messes up with the v-ripple directive
<template>
<v-container grid-list-md>
<div class="v-card-columns">
<v-card tile v-for="post in posts" :key="post.id">
<v-card-title primary-title>
<h3 headline>
{{post.title}}
</h3>
</v-card-title>
<v-card-text>
{{post.body}}
</v-card-text>
</v-card>
</div>
</v-container>
</template>
<script>
import axios from "axios";
export default {
name: "All",
data() {
return {
posts: []
}
},
mounted() {
axios
.get('https://jsonplaceholder.typicode.com/posts')
.then(res => {
this.posts = res.data
})
}
}
</script>
<style scoped>
.v-card-columns .v-card {
margin-bottom: 0.75rem;
}
#media (min-width: 576px) {
.v-card-columns {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 1.25rem;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
orphans: 1;
widows: 1;
}
.v-card-columns .v-card {
display: inline-block;
width: 100%;
}
}
</style>