<script setup>
defineProps({
    columns: {
        type: Number,
        default: 6,
    },
});
</script>
<template>
    <div class="q-pa-md q-mx-md container">
        <div class="row q-gutter-md q-mb-md justify-around no-wrap">
            <QSkeleton type="rect" square v-for="n in columns" :key="n" class="column" />
        </div>
        <div
            class="row q-gutter-md q-mb-md justify-around no-wrap"
            v-for="n in 5"
            :key="n"
        >
            <QSkeleton
                type="QInput"
                square
                v-for="m in columns"
                :key="m"
                class="column"
            />
        </div>
    </div>
</template>
<style lang="scss" scoped>
.container {
    width: 100%;
    overflow-x: hidden;
}
.column {
    flex-shrink: 0;
    width: 200px;
}
</style>
