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

<template>
    <view class="grid-nav">
        <view class="grid-nav-title" v-if="title">{{ title }}</view>
        <view class="grid-nav-content">
            <slot />
            <Cn-grid-item background="#fff" v-for="item in seat" :key="item"></Cn-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 % 4;
        if (yushu > 0) {
            for (let i = 0; i < 4 - yushu; i++) {
                this.seat.push(i);
            }
        }
    },
    components: {}
};
</script>
<style lang='scss'>
.grid-nav {
    border-radius: 12rpx;
    overflow: hidden;
    background: $uni-theme-white;

    .grid-nav-title {
        height: 80rpx;
        line-height: 80rpx;
        text-indent: 40rpx;
        border-bottom: 2rpx solid #f6f7f8;
        color: #999;
        font-size: 28rpx;
    }

    .grid-nav-content {
        background: #f6f7f8;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-gap: 2rpx;
    }
}
</style>