<template>
  <div class="parent">
    <drag-grid v-model="items" :cols="4" :rows="4" class="grid">
      <template #item="{ key }">
        <div class="banana">
          {{ key }}
        </div>
      </template>
    </drag-grid>
  </div>
</template>

<script>
export default {
  name: "Example8Responsive",
  data() {
    return {
      items: [
        { x: 1, y: 1, w: 1, h: 3, key: "item 1" },
        { x: 4, y: 3, w: 1, h: 1, key: "item 2" },
        { x: 2, y: 4, w: 2, h: 1, key: "item 3" },
      ],
    };
  },
};
</script>

<style scoped>
.parent {
  min-height: 600px;
}

.grid {
  resize: both;
  overflow: auto;
  aspect-ratio: 1;
  border: #edd85f 2px solid;
  width: 400px;
}

.banana {
  background: #edd85f;
  width: 100%;
  height: 100%;
}
</style>