Tengo un contenedor de cuadrícula con celdas y un elemento que se puede arrastrar en Vue. Necesito cambiar el tamaño del cuadro dentro del componente de cuadrícula (ver imágenes).

Esta es mi cuadrícula, y quiero que este cuadro cambie de tamaño por celdas en la cuadrícula. Algo como

Necesito cambiar el tamaño del borde arrastrable.

Esta es mi plantilla para este componente en 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>

Y este es mi estilo css

 .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; }