I am currently working with this particular component:
<template>
<div id="cms-img-upload-multiple" class="cms-img-upload-multiple">
<input class="btn-upload" v-if="!state.images.length" type="file" @change="displayImage" multiple>
<div class="img-wrap" v-else>
<div class="img-loop-wrap" v-for="(image, index) in state.images">
<div class="img-con-wrap" v-if="state.images[index]">
<img class="img-display" :src="image">
<fa class="cancel-icon" @click="clearDisplay(index)" :icon="[ 'fas', 'circle-xmark' ]"></fa>
</div>
</div>
</div>
</div>
</template>
This component is designed to manage the uploading and displaying of images within a cms. The images are organized within the img-wrap, which functions as a grid layout. Below is the corresponding scss:
.img-wrap {
overflow: hidden;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
height: 80%;
.img-loop-wrap {
.img-con-wrap {
display: flex;
.img-display {
width: 100%;
height: 20vh;
object-fit: contain;
}
}
}
Currently, everything runs smoothly when the grid configuration is set as follows:
grid-template-columns: repeat(3, 1fr);
However, upon experimenting with changing it to either:
grid-template-columns: repeat(auto-fill, 1fr);
or:
grid-template-columns: repeat(auto-fit, 1fr);
The property grid-template-column fails to function and becomes disabled in the browser window, displaying an error message stating:
Invalid property value
Why is this occurring?