display: grid数据列表自动适配宽高

当只有一张图片的时候

当有N张图片的时候

代码

<view style="position: relative;">
				<view class="img-view">
					<view v-for="(item,index) in 7" class="img-item">
						<image src="/static/tool-image/watermark/4.png" mode="widthFix" style="width: 100%;border-radius: 15rpx 15rpx 0 0;"></image>
						<button class="upload-img" @click="uploadImg" style="width: 150rpx;height: 50rpx;line-height: 50rpx;font-size: 25rpx;    padding: 0;">上传图片</button>
					</view>
				</view>
			</view>

.img-view{
		padding: 15rpx;
		display: grid; 
		grid-template-columns:auto; 
		justify-content: space-between;
		grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
		grid-gap: 15rpx;
		/* grid-auto-rows: 5rpx; */
	}
	.img-item{
		position: relative;
		display: grid;
	}
	.upload-img {
		position: absolute;
		background: red;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 200rpx;
		height: 80rpx;
		margin: auto;
	}