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

Question

I have this 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>

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?

Answer 1

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

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