Utilizing a CSS grid, I have created a gallery to display images. Below you will find the HTML code:
<template>
<div class="images-grid">
<div v-for="image of images" :key='image.src' class="img-container"&grt;
<img :src="image.src">
</div>
</div>
</template>
As well as the corresponding CSS styling:
.images-grid{
position: relative;
display: grid;
grid-template-columns: repeat(5, 120px);
padding-top: 103px;
padding-left: 3px;
width: 100%;
height: 100%;
transform-style: preserve-3d;
opacity: 0;
overflow: auto;
}
.img-container{
width: 120px;
height: 120px;
background-color: aqua;
}
.img-container img{
height: 100%;
width: 100%;
object-fit: cover;
}
The issue arises as the grid is only displaying one column instead of five, similar to this image https://i.sstatic.net/c1voV.png. Attempting to use inline-block resulted in more than five columns being displayed. Is there an error in my approach or does Vue.js handle CSS differently? As someone new to Vue.js, any guidance on correcting this issue would be greatly appreciated.