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; }
CSS Grid tiene algunas propiedades adicionales para este caso, es decir
.item { grid-column-start: <number> | <name> | span <number> | span <name> | auto; grid-column-end: <number> | <name> | span <number> | span <name> | auto; grid-row-start: <number> | <name> | span <number> | span <name> | auto; grid-row-end: <number> | <name> | span <number> | span <name> | auto; }
Ejemplo
.item-a { grid-column-start: 2; grid-column-end: five; grid-row-start: row1-start; grid-row-end: 3; }
Si no se declara grid-column-end/grid-row-end, el elemento abarcará 1 pista de forma predeterminada.
También puedes usar grid-template-areas:
.item-a { grid-area: header; } .item-b { grid-area: main; } .item-c { grid-area: sidebar; } .item-d { grid-area: footer; } .container { display: grid; grid-template-columns: 50px 50px 50px 50px; grid-template-rows: auto; grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer"; }