Problem with resize div element in grid container in Vue

Question

I have to make resizable and draggable box in grid container. I have problem with resize box. My box is in grid cell, and it can move in grid container. I can resize, but with that resize, cell size is changing. I want to resize over grid cells. And I need to do this without using any library.

I want something like this.

<template>
  <div v-bind:class="dragAndDropContainerClass">
    <div
      v-bind:class="dragAndDropItemClass"
      v-for="n in 256"
      :key="n"
      @drop="drop"
      @dragover="allowDrop"
    >
      <div
        v-if="n === 1"
        v-bind:class="itemClass"
        v-bind:id="boxId"
        draggable="true"
        @dragstart="drag"
        v-on:click="getParentClass"
      ></div>
    </div>
  </div>
</template>

.dragAndDropContainerClass:first-child {
  background-color: blue;
}

.dragAndDropContainer {
  height: 600px;
  width: 600px;
  border: 1px solid black;
  display: grid;
  gap: 1px;
  grid-template-rows: repeat(16, 1fr);
  grid-template-columns: repeat(16, 1fr);
}

.dragAndDropItem {
  text-align: center;
  background: red;
  /* resize: both;
  overflow: auto; */
}

.item {
  content: "";
  aspect-ratio: 1 / 1;
  background-color: blue;
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
  overflow: auto;
  resize: both;
}