{"id":28164040,"url":"https://github.com/klich3/vue3-auto-grid","last_synced_at":"2026-02-27T04:03:30.381Z","repository":{"id":292163272,"uuid":"980005578","full_name":"klich3/vue3-auto-grid","owner":"klich3","description":"Example of how to reorder and move grid elements","archived":false,"fork":false,"pushed_at":"2025-05-24T15:05:08.000Z","size":19265,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-26T09:20:58.550Z","etag":null,"topics":["auto-grid","composables","drag","drag-and-drop","vue3"],"latest_commit_sha":null,"homepage":"https://vue3-auto-grid-mlwsbefgq-sychev-projects.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/klich3.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["klich3"],"ko_fi":"klich3","buy_me_a_coffee":"twooneone"}},"created_at":"2025-05-08T12:14:06.000Z","updated_at":"2025-05-25T21:27:23.000Z","dependencies_parsed_at":"2025-05-08T13:33:36.056Z","dependency_job_id":"bd7e09b0-d7d3-4979-9564-5df6d2ebfdf6","html_url":"https://github.com/klich3/vue3-auto-grid","commit_stats":null,"previous_names":["klich3/vue3-auto-grid"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/klich3/vue3-auto-grid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klich3%2Fvue3-auto-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klich3%2Fvue3-auto-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klich3%2Fvue3-auto-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klich3%2Fvue3-auto-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/klich3","download_url":"https://codeload.github.com/klich3/vue3-auto-grid/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klich3%2Fvue3-auto-grid/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29884515,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-26T23:51:21.483Z","status":"online","status_checked_at":"2026-02-27T02:00:06.759Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["auto-grid","composables","drag","drag-and-drop","vue3"],"created_at":"2025-05-15T11:15:01.632Z","updated_at":"2026-02-27T04:03:30.364Z","avatar_url":"https://github.com/klich3.png","language":"JavaScript","funding_links":["https://github.com/sponsors/klich3","https://ko-fi.com/klich3","https://buymeacoffee.com/twooneone"],"categories":[],"sub_categories":[],"readme":"# Vue3 - Auto grid Sample\n\nGrid layout with Vue3 and CSS Grid.\n\nIn releases there are several versions the first one is the simplest with simple and native components.\nThe last version has already incorporated `composables` is structured in another way and has implemented `Tailwind` dependency.\n\nI have seen this reference website: https://nevflynn.com/?ref=sychev\nI liked it and decided to try to make my own version, it is not exactly the same but it has the same principle.\n\nThe idea is to create grid of squares in this example are 4 columns, and there are elements like:\n* Box \"1x1\"\n* Horizontal rectangle \"2x1\"\n* Vertical rectangle \"1x2\"\n* It could be, a larger square \"2x2\".\n\nMoving an element creates a \"Ghost\" shadow that follows the dragged element and rearranges the grid.\nElement scales are taken into account when superimposing over grid elements.\n\n***Basic version***\n![Preview](images/preview.gif)\n\n***Complex version***\n![Preview](images/preview2.gif)\n\n\n## DEV\n\nInstall: `$ npm i`\nRun: `$ npm run dev` or `$ npm run serve` \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fklich3%2Fvue3-auto-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fklich3%2Fvue3-auto-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fklich3%2Fvue3-auto-grid/lists"}