我有這個組件：
<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
這是怎么回事？
uj5u.com熱心網友回復：
您可以使用auto-fillor auto-fitwith minmax，如下所示：
grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/479360.html
標籤：javascript css Vue.js 粗鲁的 CSS网格