app-govern/components/Cn-grid/Cn-grid.vue

<template>
    <view class="grid-card">
        <view class="grid-card-title" v-if="title">{{title}}</view>
        <view class="grid-card-content">
            <slot />
            <Rc-grid-item background="#fff" v-for="item in seat" :key="item"></Rc-grid-item>
        </view>
    </view>
</template>
<script>
export default {
    props: ["title"],
    data () {
        return {
            seat: [] // 占位
        };
    },
    mounted () {
        console.warn(this.$slots.default.length);
        let num = this.$slots.default.length;
        let yushu = num % 3;
        if (yushu > 0) {
            for (let i = 0; i < 3 - yushu; i++) {
                this.seat.push(i);
            }
        }
    },
    components: {}
};
</script>
<style lang='scss'>
.grid-card {
    border-radius: 12rpx;
    overflow: hidden;
    background: $uni-theme-white;
    .grid-card-title {
        height: 80rpx;
        line-height: 80rpx;
        text-indent: 40rpx;
        border-bottom: 2rpx solid #f6f7f8;
        color: #999;
        font-size: 28rpx;
    }
    .grid-card-content {
        background: #f6f7f8;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 2rpx;
    }
}
</style>