Resize element in grid container in Vue

Question

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

Nilesh Kant · Accepted Answer · 2022-02-18 20:47:49Z

1

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

edited Feb 18, 2022 at 20:47

answered Feb 18, 2022 at 20:42

Nilesh Kant

3572 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jelena Ajdukovic Over a year ago

Yes, but my box is inside grid cel, and when I add grid-column-start: 2, there is no effect. I need box inside div, and this box must be movable and resizable inside the grid.

Nilesh Kant Over a year ago

You can use the second option to name the div and according to the drag and drop area you can update the grid cell. For that, there are many ways to achieve. One way you can try like this codesandbox.io/s/j4vn761455?file=/src/App.vue

Collectives™ on Stack Overflow

Resize element in grid container in Vue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related