CSS grid-template-columns 在与 auto-fit/auto-fill 一起使用时停止工作

Question

我有这个组件：

<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>

用于在cms中上传和显示图片。图像显示在 img-wrap 内，这是一个 grid。这是 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;
      }
    }
  }

一切正常，只要网格配置为：

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

但一旦我将其更改为：

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

或：

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

grid-template-column 属性停止工作并在浏览器中被禁用，显示：

Invalid property value

怎么回事？

Answer 1

您可以将 auto-fill 或 auto-fit 与 minmax 一起使用，如下所示：

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

CSS grid-template-columns 在与 auto-fit/auto-fill 一起使用时停止工作

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

javascript

css

vue.js

sass

css-grid