I have grid container with cells and one draggable item in Vue. I need to resize box inside grid component(look images).

This is my grid, and I want that this box resize by cells in grid. Something like

I need draggable border resize.

This is my template for this component in Vue.

<template>
  <div v-bind:class="containerClass">
    <div v-bind:class="addNewItemContainerClass">
      <button>Add new box</button>
    </div>
    <div v-bind:class="drugAndDropContainerClass">
      <div v-bind:class="drugAndDropClass">
        <div
          v-bind:class="dragAndDropItemClass"
          v-for="n in 256"
          :key="n"
          @drop="drop"
          @dragover="allowDrop"
        >
          <div
            v-if="n === 1"
            v-bind:class="boxClass"
            v-bind:id="n"
            draggable="true"
            @dragstart="drag"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

And this is my css style

.container {
  height: 100vh;
  width: fit-content;
}

.addNewItemContainer {
  padding: 10px 5px;
  border-bottom: black 1px solid;
}

.drugAndDropContainer {
  background-color: #DAF0F7;
  padding: 10px;

  height: 100%;
}

.drugAndDrop {
  display: grid;
  gap: 10px;
  grid-template-rows: repeat(16, 1fr);
  grid-template-columns: repeat(16, 1fr);
  height: 800px;
  width: 800px;
}

.dragAndDropItem {
  content: "";
  background-color: #C8D9F0;
  border-radius: 3px;
}

.box {
  aspect-ratio: 1/1;
  width: 99px;
  background-color: white;
  border-radius: 3px;
}