https://github.com/klich3/vue3-auto-grid

Example of how to reorder and move grid elements
https://github.com/klich3/vue3-auto-grid

auto-grid composables drag drag-and-drop vue3

Last synced: 4 months ago
JSON representation

Example of how to reorder and move grid elements

• Host: GitHub
• URL: https://github.com/klich3/vue3-auto-grid
• Owner: klich3
• Created: 2025-05-08T12:14:06.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2025-05-24T15:05:08.000Z (about 1 year ago)
• Last Synced: 2025-10-26T09:20:58.550Z (8 months ago)
• Topics: auto-grid, composables, drag, drag-and-drop, vue3
• Language: JavaScript
• Homepage: https://vue3-auto-grid-mlwsbefgq-sychev-projects.vercel.app/
• Size: 18.4 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

          
# Vue3 - Auto grid Sample

Grid layout with Vue3 and CSS Grid.

In releases there are several versions the first one is the simplest with simple and native components.

The last version has already incorporated `composables` is structured in another way and has implemented `Tailwind` dependency.

I have seen this reference website: https://nevflynn.com/?ref=sychev

I liked it and decided to try to make my own version, it is not exactly the same but it has the same principle.

The idea is to create grid of squares in this example are 4 columns, and there are elements like:

* Box "1x1"

* Horizontal rectangle "2x1"

* Vertical rectangle "1x2"

* It could be, a larger square "2x2".

Moving an element creates a "Ghost" shadow that follows the dragged element and rearranges the grid.

Element scales are taken into account when superimposing over grid elements.

***Basic version***

![Preview](images/preview.gif)

***Complex version***

![Preview](images/preview2.gif)

## DEV

Install: `$ npm i`

Run: `$ npm run dev` or `$ npm run serve`