slidev-theme-narduin/layouts/auto-grid.vue

29 lines
487 B
Vue

<script setup lang="ts">
const props = defineProps<{
columns?: number
}>()
</script>
<template>
<div class="slidev-layout">
<slot />
<div class="auto-grid">
<slot name="content" />
</div>
</div>
</template>
<style scoped>
.auto-grid {
--_columns: v-bind(columns);
display: grid;
grid-template-columns: repeat(var(--_columns, 2), 1fr);
grid-auto-rows: 250px;
gap: var(--space-xs);
}
.auto-grid > * {
inline-size: 100%;
block-size: 100%;
}
</style>