Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

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).

enter image description here

This is my grid, and I want that this box resize by cells in grid. Something like

enter image description here

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

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

enter image description here

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

enter image description here

7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs