Question

0

85

Views

Resize element in grid container in Vue

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

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-04T01:44:54.383Z

CSS Grid has some additional properties for this case i.e.

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

Example

.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start;
  grid-row-end: 3;
}

If no grid-column-end/grid-row-end is declared, the item will span 1 track by default.

You can also use 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";
}