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

<script setup lang="ts">
defineProps<{
  columns?: number
  rows?: string
}>()
</script>

<template>
  <div class="slidev-layout">
    <div>
      <slot />
      <div class="auto-grid">
        <slot name="content" />
      </div>
      <slot name="after" />
    </div>
  </div>
</template>

<style scoped>
.auto-grid {
  --columns: v-bind(columns);
  --rows: v-bind(rows);
  display: grid;
  grid-template-columns: repeat(var(--columns, 2), 1fr);
  grid-auto-rows: var(--rows, auto);
  gap: var(--space-xs);

  & > * {
    inline-size: 100%;
    block-size: 100%;
  }
  & > :deep(img) {
    block-size: auto;
  }
}
</style>