{"id":27773080,"url":"https://github.com/asterics/vue-css-grid-layout","last_synced_at":"2026-02-08T04:34:05.976Z","repository":{"id":267916326,"uuid":"902749362","full_name":"asterics/vue-css-grid-layout","owner":"asterics","description":"A grid layout for Vue.js using CSS Grid","archived":false,"fork":false,"pushed_at":"2025-01-07T09:21:35.000Z","size":1759,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-10-05T03:51:09.714Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/asterics.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2024-12-13T07:34:13.000Z","updated_at":"2025-01-07T09:21:38.000Z","dependencies_parsed_at":"2025-01-08T21:01:14.363Z","dependency_job_id":null,"html_url":"https://github.com/asterics/vue-css-grid-layout","commit_stats":null,"previous_names":["asterics/vue-css-grid-layout"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/asterics/vue-css-grid-layout","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asterics%2Fvue-css-grid-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asterics%2Fvue-css-grid-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asterics%2Fvue-css-grid-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asterics%2Fvue-css-grid-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/asterics","download_url":"https://codeload.github.com/asterics/vue-css-grid-layout/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asterics%2Fvue-css-grid-layout/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29220520,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-08T03:18:47.732Z","status":"ssl_error","status_checked_at":"2026-02-08T03:15:31.985Z","response_time":57,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":[],"created_at":"2025-04-30T00:06:36.755Z","updated_at":"2026-02-08T04:34:05.957Z","avatar_url":"https://github.com/asterics.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue CSS Grid Layout\nA grid layout for Vue.js using CSS Grid Layout.\n\n\u003cdiv align=\"center\" width=\"100%\"\u003e\n    \u003cimg src=\"img/dragging-resizing-collisions.gif\" width=\"40%\"\u003e\n    \u003cimg src=\"img/move-all.gif\" width=\"40%\"\u003e\n\u003c/div\u003e\n\n## Features\nThis library was created since both [vue-grid-layout](https://github.com/jbaysolutions/vue-grid-layout) and [gridstack.js](https://github.com/gridstack/gridstack.js) didn't fit the requirements for the use in the [AAC application AsTeRICS Grid](https://github.com/asterics/AsTeRICS-Grid). The main features are:\n* uses the native [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) instead of absolute positioning\n* automatically fills the whole container with same-sized grid elements ([not easily possible in gridstack.js](https://github.com/gridstack/gridstack.js/issues/2583))\n* uses native [Vue List Move Transitions](https://v2.vuejs.org/v2/guide/transitions#List-Move-Transitions) for animations\n* predictable collision handling: either swapping elements by dropping an element onto another element or move other elements to the right, by dropping it in-between two elements\n* not moving other elements until dropping the moved element (not messing up of the layout while moving)\n* easy way to move all elements\n\n\u003e [!NOTE]  \n\u003e Currently only Vue `2.7` is supported, but it should be no problem to make the library compatible with Vue 3\n\n## Examples\nThere are the following examples (see [folder examples](https://github.com/asterics/vue-css-grid-layout/tree/main/examples)):\n* [minimum-example.html](https://asterics.github.io/vue-css-grid-layout/examples/minimum-example.html): minimum working example\n* [basic-options.html](https://asterics.github.io/vue-css-grid-layout/examples/basic-options.html): try all options\n* [responsive.html](https://asterics.github.io/vue-css-grid-layout/examples/responsive.html): responsive grid using full viewport size\n* [different-element-types.html](https://asterics.github.io/vue-css-grid-layout/examples/different-element-types.html): render different types of elements\n* [insert-new.html](https://asterics.github.io/vue-css-grid-layout/examples/insert-new.html): insert new elements at a specific location by click / tap\n* [move-all.html](https://asterics.github.io/vue-css-grid-layout/examples/move-all.html): move all elements to top / right / bottom / left\n* [switch-layouts.html](https://asterics.github.io/vue-css-grid-layout/examples/switch-layouts.html): switch between predefined layouts\n\n## Use via npm in SFC\nTo use this library via npm and with Vue's Single-File Components (SFC), follow these steps:\n\nFirst install via `npm install vue-css-grid-layout --save` or `yarn add vue-css-grid-layout`.\n\nCreate a custom component for rendering a single grid element like this, e.g. as `render-component.vue`:\n```vue\n\u003ctemplate\u003e\n    \u003cdiv class=\"render-component\"\u003e{{ element.id }}\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n    props: {\n        element: Object\n    }\n}\n\u003c/script\u003e\n\n\u003cstyle scoped\u003e\n.render-component {\n    border: 1px solid black;\n    display: flex;\n    flex-grow: 1;\n}\n\u003c/style\u003e\n```\n\nUse `GridLayout` from this library in order to render a grid:\n```vue\n\u003ctemplate\u003e\n    \u003cgrid-layout :elements=\"elements\" :render-component=\"RenderComponent\"/\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { GridLayout } from 'vue-css-grid-layout';\nimport RenderComponent from './render-component.vue';\n\nexport default {\n    components: { GridLayout, RenderComponent},\n    data() {\n        return {\n            RenderComponent: RenderComponent,\n            elements: [\n                { x: 0, y: 0, width: 1, height: 1, id: 1 },\n                { x: 1, y: 1, width: 1, height: 1, id: 2 }\n            ]\n        }\n    }\n}\n\u003c/script\u003e\n\n\u003cstyle src=\"vue-css-grid-layout/dist/vue-css-grid-layout.css\"\u003e\u003c/style\u003e\n```\n\n## Use from CDN\nYou can also use the files from CDN (or use the files from the `dist` folder of this repository).\n\nInclude the CSS: \n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/vue-css-grid-layout/dist/vue-css-grid-layout.css\"\u003e\n```\n\nCreate some HTML using the `grid-layout` element`:\n```html\n\u003cdiv id=\"app\"\u003e\n    \u003cgrid-layout :elements=\"elements\" render-component=\"render-component\"/\u003e\n\u003c/div\u003e\n```\n\nImport the `GridLayout` class in a script and use it:\n```html\n\u003cscript type=\"module\"\u003e\n    import { GridLayout } from 'https://unpkg.com/vue-css-grid-layout/dist/vue-css-grid-layout.es.js';\n\n    Vue.component('render-component', {\n        template: '\u003cdiv class=\"render-component\"\u003e{{ element.id }}\u003c/div\u003e',\n        props: {\n            element: Object\n        }\n    });\n\n    new Vue({\n        el: '#app',\n        components: { GridLayout },\n        data() {\n            return {\n                elements: [\n                    { x: 0, y: 0, width: 1, height: 1, id: 1 },\n                    { x: 1, y: 1, width: 1, height: 1, id: 2 }\n                ]\n            };\n        }\n    });\n\u003c/script\u003e\n```\n\nSee [minimum-example.html](https://github.com/asterics/vue-css-grid-layout/blob/main/examples/minimum-example.html) for the full example.\n\n## API\nThere are two components that can be used:\n* `GridLayout`: the Vue component rendering a grid using CSS Grid\n* `gridLayoutUtil`: a collection of utils for actions on the grid elements, e.g. collision handling or moving multiple elements. This component is used internally by `GridLayout`, but can also be used externally for manual collision handling or moving of multiple elements.\n\n### GridLayout\nThe `GridLayout` Vue component has the following props and events.\n\n#### Props\n* `renderComponent: [Object, String]`: a Vue component that renders a single element of the grid. A prop `element` is passed to this component containing the data of the current element to render.\n* `elements: Array`: an array of elements to render in the grid. Every element must have the properties `id, x, y, width, height` where the `id` must be unique. The single elements are passed to `renderComponent` as prop `element`.\n* `rows: Number`: the minimum number of rows of the grid. Actual shown rows are the maximum of `rows` and `rows defined by given elements`.\n* `columns: Number`: the minimum number of columns of the grid. Actual shown columns are the maximum of `columns` and `columns defined by given elements`.\n* `backgroundColor: String`: the background color of the grid in any format valid in CSS (e.g. `lightblue` or `#f5f5f5`).\n* `baseTag: String`: the name of the HTML tag the base element of the grid should have, e.g. `div`, defaults to an ordered list (`ol`).\n* `elementTag: String`: the name of the HTML tag the grid elements should have, e.g. `div`, defaults to a list item (`li`). \n* `editable: Boolean`: if `true` the grid can be edited, elements can be dragged and resized.\n* `resizeHandleSelector: String`: a CSS selector for selecting resize handles (at the bottom right) of the elements which make it clearer / easier to resize elements. Resize handles have to be added to the `renderComponent`, if desired.\n* `backgroundLines: Boolean`: if `true` the grid shows lines in the background indicating the rows and columns of the grid\n* `animationDurationMs: Number`: the duration of the animations when elements are dragged / resized (`editable: true`), defaults to `200ms`.\n\nAny additional props can be passed to `GridLayout` which are passed on to the `renderComponent`. So e.g. if passing some generic options to `grid-layout` like this:\n```html\n\u003cgrid-layout :elements=\"elements\" render-component=\"render-component\" :generic-options=\"{ color: 'green' }\"/\u003e\n```\nThese options can be used within the `render-component` along with the `element` passed by default:\n```javascript\nprops: {\n    element: Object, \n    genericOptions: Object\n}\n```\n\n#### Events\nTwo events can be emitted by `GridLayout` with `editable: true`:\n* `changed (newElements)`: the event `changed` is emitted after the layout has changed by dragging or resizing. In the handler the rendered elements should be set to the new elements like `this.elements = newElements`.\n* `interacted (x,y)`: the event `interacted` is emitted after a click or tap anywhere on the grid returning the coordinates of this event. This makes it easily possible to create new elements at the position of the last user interaction.\n\n### gridLayoutUtil\nThe component `gridLayoutUtil` can be used for manually doing actions on the grid elements like moving all elements or resolving conflicts.\n\nImport it along with `GridLayout`, if needed:\n```javascript\nimport { GridLayout, gridLayoutUtil } from 'vue-css-grid-layout';\n// or\nimport { GridLayout, gridLayoutUtil } from 'https://unpkg.com/vue-css-grid-layout/dist/vue-css-grid-layout.es.js';\n```\n\nThese are the most important methods, for more details look at the [JSDoc comments in the implementation](https://github.com/asterics/vue-css-grid-layout/blob/main/src/utils/gridLayoutUtil.js):\n* `gridLayoutUtil.moveAsPossible = function(allElements = [], moveElements = [], direction, options = {})`\n   *  moves elements in a specific direction as far as possible (without colliding with another element)\n   * `allElements`: array of all elements\n   * `moveElements`: the elements to move\n   * `direction`: the direction to move, see gridLayoutUtil.DIR_* or 1-4 (UP, RIGHT, DOWN, RIGHT)\n   * `options.gridWidth` standard width of the grid, can be overruled by given grid elements\n   * `options.gridHeight` standard height of the grid, can be overruled by given grid elements\n* `gridLayoutUtil.resolveCollisions = function(gridElements, newElement, options = {})`\n   * resolves collisions based on given grid and a newly added / changed element\n   * `gridElements` array of all grid elements (including newElement)\n   * `newElement` element changed / added (already at new position)\n\n## Acknowledgement\nThis library was initially developed within a [netidee project funding](https://www.netidee.at/asterics-grid).\n\n\u003ca href=\"https://www.netidee.at/asterics-grid\"\u003e\n\u003cimg src=\"https://github.com/asterics/AsTeRICS-Grid/assets/2537025/bccf076b-9682-4083-b259-31dffbd2bb17\"/\u003e\n\u003c/a\u003e\n\nThis library uses [interact.js](https://interactjs.io/) as dependency.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasterics%2Fvue-css-grid-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasterics%2Fvue-css-grid-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasterics%2Fvue-css-grid-layout/lists"}