Seems like everything is functioning properly
<template>
<div class="columns">
<div v-for="image in allImagesData" :key="image.platform" class="column"gt;
<img class="fitting-image" :src="image.media_url" />
<p>{{ image.platform }}</p>
<p>{{ image.count }}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
allImagesData: [
{
platform: 'facebook',
media_url: 'https://source.unsplash.com/random/200x200?sig=1',
count: 12,
},
{
platform: 'twitter',
media_url: 'https://source.unsplash.com/random/200x200?sig=2',
count: 15,
},
{
platform: 'instagram',
media_url: 'https://source.unsplash.com/random/200x200?sig=3',
count: 4,
},
{
platform: 'mastodon',
media_url: 'https://source.unsplash.com/random/200x200?sig=4',
count: 664,
},
{
platform: 'discord',
media_url: 'https://source.unsplash.com/random/200x200?sig=5',
count: 15,
},
{
platform: 'discord2',
media_url: 'https://source.unsplash.com/random/200x200?sig=6',
count: 15,
},
{
platform: 'discord3',
media_url: 'https://source.unsplash.com/random/200x200?sig=7',
count: 15,
},
{
platform: 'discord4',
media_url: 'https://source.unsplash.com/random/200x200?sig=8',
count: 15,
},
{
platform: 'discord5',
media_url: 'https://source.unsplash.com/random/200x200?sig=9',
count: 15,
},
{
platform: 'discord6',
media_url: 'https://source.unsplash.com/random/200x200?sig=10',
count: 15,
},
],
}
},
}
</script>
<style scoped>
.columns {
display: grid;
--gap: 1rem; /* adjust this value to change the space between elements */
grid-template-columns: repeat(auto-fit, minmax(auto, calc(25% - var(--gap))));
gap: var(--gap);
}
.column {
background: paleturquoise;
border: 3px solid tomato;
}
.fitting-image {
object-fit: cover;
height: auto;
width: 100%;
}
</style>
Visual representation on the devtools grid layout overlay
https://i.sstatic.net/o74cz.jpg
Maintains a consistent 25% width on all screen sizes and offers flexibility in adjusting the spacing between elements.