[](https://github.com/prettier/prettier)
[](https://bundlephobia.com/result?p=ck-vue3-ts-grid-layout)
[](https://www.npmjs.com/package/ck-vue3-ts-grid-layout)
[](https://github.com/gwinnem/ck-vue3-ts-grid-layout/blob/master/LICENSE)
[](http://commitizen.github.io/cz-cli/)
ck-vue3-ts-grid-layout
## What is ck-vue3-ts-grid-layout
VUE 3 responsive grid layout is based on the original work by [JBaysolution's vue-grid-layout](https://github.com/jbaysolutions/vue-grid-layout).
This new and refactored component has more features, typesafe Emits, Props and a strict linting rule setup.
A proper App developed for testing purposes.
Documentation website contains 13 examples. Will be updated when new features are added to the component.
## Donate
If you enjoyed this project — or just feeling generous, consider buying me a 🍺. Cheers!
### Features:
* Prop in GridLayout for distributing GridItem's equally.
* GridLayout now has slot for GridItem.
* Prop for displaying grid lines in GridLayout.
* Prop for setting edit mode in GridLayout. Shortcuts the isDraggable and isResizable props.
* Prop for adding border radius in GridLayout. Adds a 8px radius to each GridItem.
* Prop in GridLayout for shifting GridItems horizontally when dragging instead of vertical.
* Separated out style variables, so it is easier to restyle the component.
* Added tab navigation support.
* Close button in GridItem for removing the GridItem from the GridLayout.
* Added more events to GridLayout and GridItem.
* Support for resize Bottom, Bottom Right and Right in GridIem.
* Draggable widgets
* Resizable widgets
* Static widgets
* Bounds checking for dragging and resizing
* Widgets may be added or removed without rebuilding grid
* Layout can be serialized and restored
* Automatic RTL support
* Responsive using predefined layout's for different breakpoints.
* GridItem automatically resizes when content change(Useful when displaying charts).
### Testing:
* __Unit tests__ [Using Vitest](https://vitest.dev/)
* __Unit test console__ [Using Vitest UI](https://vitest.dev/guide/ui.html#vitest-ui)
* __e2e tests__ [Using nightwatchjs](https://nightwatchjs.org/)
## Changelog
## Setting up ck-vue3-ts-grid-layout in your project
[Howto](https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/docs/setup.md)
#### Auditing the package
```
npm audit --registry=https://registry.npmjs.org/
```
### References
* [Mini.css used in the sandbox](https://minicss.us/docs.htm#)
* [Vue-Multiselect used in the sandbox](https://vue-multiselect.js.org/#sub-getting-started)
* [Vitest](https://vitest.dev/)
* [Vitest UI](https://vitest.dev/guide/ui.html#vitest-ui)
* [nightwatchjs](https://nightwatchjs.org/)