<template>
    <div class="row-box" ref="row" :style="{ 'grid-template-columns': repeat, 'grid-gap': gridGap }">
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: "qg-row",
    props: {
        gridGap: {
            type: String,
            default: "10rem",
        },
        number: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            repeat: "",
        };
    },
    mounted() {
        this.repeat = `repeat(${this.number || this.$refs.row.children.length},1fr)`;
    },
};
</script>

<style scoped>
.row-box {
    display: grid;
    width: 100%;
}
</style>
