Skip to content

oldercoder-cn/vue-grid-layout

Repository files navigation

vue-grid-layout

WORK IN PROGRESS: USE AT YOUR OWN RISK!

vue-grid-layout is a grid layout system, like Gridster, for Vue.js.

Heavily inspired in React-Grid-Layout

It's responsive and supports breakpoints. Breakpoint layouts can be provided by the user or autogenerated.

Projects based on vue-grid-layout

Know of others? Create a PR to let me know!

Features

  • 100% Vue.js - no jQuery
  • Draggable widgets
  • Resizable widgets
  • Static widgets
  • Vertical auto-packing
  • Bounds checking for dragging and resizing
  • Widgets may be added or removed without rebuilding grid
  • Layout can be serialized and restored
  • Responsive breakpoints
  • Separate layouts per responsive breakpoint
  • Grid Items placed using CSS Transforms

Installation

Usage

Contribute

If you have a feature request, please add it as an issue or make a pull request.

TODO List

  • Basic grid layout
  • Fluid grid layout
  • Grid packing
  • Draggable grid items
  • Live grid packing while dragging
  • Resizable grid items
  • Layouts per responsive breakpoint
  • Static elements
  • Min/max w/h per item
  • Resizable handles on other corners
  • Configurable w/h per breakpoint

About

A draggable and resizable grid layout, for Vue.js.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Vue 69.2%
  • JavaScript 26.8%
  • CSS 2.5%
  • HTML 1.5%