I've been struggling to find a proper solution for implementing a masonry layout in Vue 3 with Bootstrap. I tried using Bootstrap 5 cards with the Masonry CDN, but it resulted in squeezed and overlapping cards, failing to achieve the desired layout. I may have overlooked something crucial. Any assistance would be greatly appreciated.
EDIT:
- Check out this CodeSandbox containing some sample data.
- View an HTML example on Codeply.
Here is a snippet of my code:
<template>
<div class="container">
<div class="row justify-content-center" data-masonry='{"percentPosition": true }'>
<div class="col-lg-3 col-md-4 col-sm-col" v-for="(newsPiece, index) in newsCollection" :key="index">
<div class="card shadow-sm mt-3 mx-1">
<img :src="newsPiece.urlToImage" alt="image link lost" data-bs-toggle="collapse"
:data-bs-target="'#collapseImage'+index">
<h5><a :href="newsPiece.url" target="_blank">{{ newsPiece.title }}</a></h5>
<div class="collapse" :id="'collapseImage'+index">
<div class="card-body-noborder">
<span v-html="newsPiece.description"></span>
</div>
</div>
<div class="card-footer">
{{ newsPiece.publishedAt.replace('T',' ').replace('Z','') }}
</div>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.card {
width: 13rem;
border-radius:10px;
}
.row {
padding: 0 15%;
}
h5 {
font-size: 1rem;
}
.card-footer {
font-size: 1rem;
}
@media screen and (max-width:600px) {
.card {
width: 20rem;
border-radius:10px;
}
h5 {
font-size: 1.2rem;
}
}
</style>