CSS grid-template-columns stops working when used with auto-fit/auto-fill-CodePudding

I have this component:

<template>
  <div id="cms-img-upload-multiple" >
    <input  v-if="!state.images.length" type="file" @change="displayImage" multiple>
    <div  v-else>
      <div  v-for="(image, index) in state.images">
        <div  v-if="state.images[index]">
          <img  :src="image">
          <fa  @click="clearDisplay(index)" :icon="[ 'fas', 'circle-xmark' ]"></fa>
        </div>
      </div>
    </div>
  </div>
</template>

which is used to upload and display images in a cms. The images are displayed inside img-wrap, which is a grid. Here's the 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;
      }
    }
  }

Everything works, as long as the grid configuration is:

grid-template-columns: repeat(3, 1fr);

but as soon as I change it to:

grid-template-columns: repeat(auto-fill, 1fr);

or:

grid-template-columns: repeat(auto-fit, 1fr);

the grid-template-column property stops working and gets disabled in the browser, which shows:

Invalid property value

What's going on?

CodePudding user response：

You can use auto-fill or auto-fit with minmax, something like following:

grid-template-columns: repeat(auto-fill, minmax(200px,1fr));