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

Overview

vue-grid-layout

vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired by React-Grid-Layout

Current version: 2.3.9 (Supports Vue 2.2+)

For Vue 2.1.10 and below use version 2.1.3

For Vue 1 use version 1.0.3


[Demo | Changelog]

English | 简体中文

Projects using vue-grid-layout

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

Features

  • 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 (resizing not working with RTL on 2.2.0)
  • Responsive

Getting Started

Installation

npm

# install with npm    
npm install vue-grid-layout --save

# install with yarn    
yarn add vue-grid-layout

Import the library

    import VueGridLayout from 'vue-grid-layout';

Add to other Vue components

   export default {
       components: {
           GridLayout: VueGridLayout.GridLayout,
           GridItem: VueGridLayout.GridItem
       },
   // ... data, methods, mounted (), etc.
   }
   

browser

Include the browser-ready bundle (download from releases) in your page. The components will be automatically available.

">
    <script src="vue-grid-layout.umd.min.js">script>

Usage

	var testLayout = [
	    {"x":0,"y":0,"w":2,"h":2,"i":"0"},
	    {"x":2,"y":0,"w":2,"h":4,"i":"1"},
	    {"x":4,"y":0,"w":2,"h":5,"i":"2"},
	    {"x":6,"y":0,"w":2,"h":3,"i":"3"},
	    {"x":8,"y":0,"w":2,"h":3,"i":"4"},
	    {"x":10,"y":0,"w":2,"h":3,"i":"5"},
	    {"x":0,"y":5,"w":2,"h":5,"i":"6"},
	    {"x":2,"y":5,"w":2,"h":5,"i":"7"},
	    {"x":4,"y":5,"w":2,"h":5,"i":"8"},
	    {"x":6,"y":3,"w":2,"h":4,"i":"9"},
	    {"x":8,"y":4,"w":2,"h":4,"i":"10"},
	    {"x":10,"y":4,"w":2,"h":4,"i":"11"},
	    {"x":0,"y":10,"w":2,"h":5,"i":"12"},
	    {"x":2,"y":10,"w":2,"h":5,"i":"13"},
	    {"x":4,"y":8,"w":2,"h":4,"i":"14"},
	    {"x":6,"y":8,"w":2,"h":4,"i":"15"},
	    {"x":8,"y":10,"w":2,"h":5,"i":"16"},
	    {"x":10,"y":4,"w":2,"h":2,"i":"17"},
	    {"x":0,"y":9,"w":2,"h":3,"i":"18"},
	    {"x":2,"y":6,"w":2,"h":2,"i":"19"}
	];
	
	new Vue({
	    el: '#app',
	    data: {
	        layout: testLayout,
	    },
	});
{{item.i}} ">
    <grid-layout
            :layout.sync="layout"
            :col-num="12"
            :row-height="30"
            :is-draggable="true"
            :is-resizable="true"
            :is-mirrored="false"
            :vertical-compact="true"
            :margin="[10, 10]"
            :use-css-transforms="true"
    >

        <grid-item v-for="item in layout"
                   :x="item.x"
                   :y="item.y"
                   :w="item.w"
                   :h="item.h"
                   :i="item.i"
                   :key="item.i">
            {{item.i}}
        grid-item>
    grid-layout>

Documentation

Properties

GridLayout
  • layout

    • type: Array
    • required: true

    This is the initial layout of the grid.

    The value must be an Array of Object items. Each item must have i, x, y, w and h properties. Please refer to the documentation for GridItem below for more information.

  • responsiveLayouts

    • type: Object
    • required: false
    • default : {}

    This is the initial layouts of the grid per breakpoint if responsive is set to true. The keys of the Object are breakpoint names and each value is an Array of Object items as defined by layout prop. eg:{ lg:[layout items], md:[layout items] }. Setting the prop after the creation of the GridLayout has no effect.

  • colNum

    • type: Number
    • required: false
    • default: 12

    Says how many columns the grid has.

    The value should be a natural number.

  • rowHeight

    • type: Number
    • required: false
    • default: 150

    Says what is a height of a single row in pixels.

  • maxRows

    • type: Number
    • required: false
    • default: Infinity

    Says what is a maximal number of rows in the grid.

  • margin

    • type: Array
    • required: false
    • default: [10, 10]

    Says what are the margins of elements inside the grid.

    The value must be a two-element Array of Number. Each value is expressed in pixels. The first element is a margin horizontally, the second element is a vertical margin.

  • isDraggable

    • type: Boolean
    • required: false
    • default: true

    Says if the grids items are draggable.

  • isResizable

    • type: Boolean
    • required: false
    • default: true

    Says if the grids items are resizable.

  • isMirrored

    • type: Boolean
    • required: false
    • default: false

    Says if the RTL/LTR should be reversed.

  • autoSize

    • type: Boolean
    • required: false
    • default: true

    Says if the container height should swells and contracts to fit contents.

  • verticalCompact

    • type: Boolean
    • required: false
    • default: true

    Says if the layout should be compact vertically.

  • preventCollision

    • type: Boolean
    • required: false
    • default: false

    Says if grid items will move when being dragged over.

  • useCssTransforms

    • type: Boolean
    • required: false
    • default: true

    Says if the CSS transition-property: transform; should be used.

  • responsive

    • type: Boolean
    • required: false
    • default: false

    Says if the layout should be responsive to window width

  • breakpoints

    • type: Object
    • required: false
    • default: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }

    Breakpoints defined for responsive layout. Sets widths on wich column number changes

  • cols

    • type: Object
    • required: false
    • default: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }

    Defines number of columns for each breakpoint

GridItem
  • i

    • type: String
    • required: true

    This is the unique identifier of the item.

  • x

    • type: Number
    • required: true

    Says what is a initial horizontal position of the item (in which column it should be placed).

    The value must be a whole number.

  • y

    • type: Number
    • required: true

    Says what is a initial vertical position of the item (in which row it should be placed).

    The value must be a whole number.

  • w

    • type: Number
    • required: true

    Says what is a initial width of the item.

    The value is a number that is multiplied by colWidth.

  • h

    • type: Number
    • required: true

    Says what is a initial height of the item.

    The value is a number that is multiplied by rowHeight.

  • minW

    • type: Number
    • required: false
    • default: 1

    Says what is a minimal width of the item. If w will be smaller then minW then w will be set to minW.

    The value is a number that is multiplied by colWidth.

  • minH

    • type: Number
    • required: false
    • default: 1

    Says what is a minimal hieght of the item. If h will be smaller then minH then h will be set to minH.

    The value is a number that is multiplied by rowHeight.

  • maxW

    • type: Number
    • required: false
    • default: Infinity

    Says what is a maximal width of the item. If w will be bigger then maxW then w will be set to maxW.

    The value is a number that is multiplied by colWidth.

  • maxH

    • type: Number
    • required: false
    • default: Infinity

    Says what is a maximal height of the item. If h will be bigger then maxH then h will be set to maxH.

    The value is a number that is multiplied by rowHeight

  • isDraggable

    • type: Boolean
    • required: false
    • default: null

    Says if item is draggable.

    If default value is null then it's inherited from parent.

  • isResizable

    • type: Boolean
    • required: false
    • default: null

    Says if item is resizable.

    If default value is null then it's inherited from parent.

  • static

    • type: Boolean
    • required: false
    • default: false

    Says if item is static (won't be draggable, resizable or moved by other items).

  • dragIgnoreFrom

    • type: String
    • required: false
    • default: 'a, button'

    Says which elements of the item shouldn't trigger drag event of the item.

    The value is css-like selector string.

    For more info please refer to ignoreFrom in interact.js docs.

  • dragAllowFrom

    • type: String
    • required: false
    • default: null

    Says which elements of the item should trigger drag event of the item.

    The value is css-like selector string.

    If null then one can drag by any (excluding dragIgnoreFrom) element of the item.

    For more info please refer to allowFrom in interact.js docs.

  • resizeIgnoreFrom

    • type: String
    • required: false
    • default: 'a, button'

    Says which elements of the item shouldn't trigger resize event of the item.

    The value is css-like selector string.

    For more info please refer to ignoreFrom in interact.js docs.

Events

Move and resize event listeners can be added to each grid-item, so that the parent Vue can be notified when a grid element is being moved or resized. Moved and resized event listeners can be added, if the only notification needed is when an item is finished moving or resizing.

Working example here

{{item.i}} ">
    <grid-layout
            :layout="layout"
            :col-num="12"
            :row-height="30"
            :is-draggable="true"
            :is-resizable="true"
            :vertical-compact="true"
            :margin="[10, 10]"
            :use-css-transforms="true"
            @layout-created="layoutCreatedEvent"
            @layout-before-mount="layoutBeforeMountEvent"
            @layout-mounted="layoutMountedEvent"
            @layout-ready="layoutReadyEvent"
            @layout-updated="layoutUpdatedEvent"
            @breakpoint-changed="breakpointChangedEvent"
    >

        <grid-item v-for="item in layout"
                   :x="item.x"
                   :y="item.y"
                   :w="item.w"
                   :h="item.h"
                   :i="item.i"
                   :key="item.i"
                   @resize="resizeEvent"
                   @move="moveEvent"
                   @resized="resizedEvent"
                   @container-resized="containerResizedEvent"
                   @moved="movedEvent">
            {{item.i}}
        grid-item>
    grid-layout>
  • layoutCreatedEvent

    Layout created event

    Emited on the component created lifecycle hook

    layoutCreatedEvent: function(newLayout){
      console.log("Created layout: ", newLayout)
    }
  • layoutBeforeMountEvent

    Layout beforeMount event

    Emited on the component beforeMount lifecycle hook

    layoutBeforeMountEvent: function(newLayout){
      console.log("beforeMount layout: ", newLayout)
    }
  • layoutMountedEvent

    Layout mounted event

    Emited on the component mounted lifecycle hook

    layoutMountedEvent: function(newLayout){
      console.log("Mounted layout: ", newLayout)
    }
  • layoutReadyEvent

    Layout ready event

    Emited when all the operations on the mount hook finish

    layoutReadyEvent: function(newLayout){
      console.log("Ready layout: ", newLayout)
    }
  • layoutUpdatedEvent

    Layout updated event

    Every time the layout has finished updating and positions of all grid-items are recalculated

    layoutUpdatedEvent: function(newLayout){
      console.log("Updated layout: ", newLayout)
    }
  • moveEvent

    Move event

    Every time an item is being moved and changes position

    moveEvent: function(i, newX, newY){
        console.log("MOVE i=" + i + ", X=" + newX + ", Y=" + newY);
    },
  • resizeEvent

    Resize event

    Every time an item is being resized and changes size

    resizeEvent: function(i, newH, newW, newHPx, newWPx){
        console.log("RESIZE i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
    },
  • movedEvent

    Moved event

    Every time an item is finished being moved and changes position

    movedEvent: function(i, newX, newY){
        console.log("MOVED i=" + i + ", X=" + newX + ", Y=" + newY);
    },
  • resizedEvent

    Resized event

    Every time an item is finished being resized and changes size

    /**
     * 
     * @param i the item id/index
     * @param newH new height in grid rows 
     * @param newW new width in grid columns
     * @param newHPx new height in pixels
     * @param newWPx new width in pixels
     * 
     */
    resizedEvent: function(i, newH, newW, newHPx, newWPx){
        console.log("RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
    },
  • containerResizedEvent

    Container Resized event

    Every time the grid item/layout container changes size (browser window or other)

    /**
     * 
     * @param i the item id/index
     * @param newH new height in grid rows 
     * @param newW new width in grid columns
     * @param newHPx new height in pixels
     * @param newWPx new width in pixels
     * 
     */
    containerResizedEvent: function(i, newH, newW, newHPx, newWPx){
        console.log("CONTAINER RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
    },
  • breakpointChangedEvent

    Breakpoint Changed event

    Every time the breakpoint value changes due to window resize

    /**
     * 
     * @param newBreakpoint the breakpoint name
     * @param newLayout the chosen layout for the breakpoint
     * 
     */
    breakpointChangedEvent: function(newBreakpoint, newLayout){
        console.log("BREAKPOINT CHANGED breakpoint=", newBreakpoint, ", layout: ", newLayout );
    },

Contribute

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

TODO List

  • Basic grid layout
  • Responsive
  • Draggable grid items
  • Resizable grid items
  • Static elements
  • Min/max w/h per item
You might also like...
grid layout,support flex

simple-grid a simple grid layout(Vue Component) Installation use npm $ npm i simple-xgrid --save import Grid from 'simple-xgrid' import 'simple-xgrid

vue-products-grid is a responsive Vue component to create a products grid for ecommerce apps.

| vue-products-grid vue-products-grid is a responsive Vue component to create a products grid for ecommerce apps. Fully configurable with different op

:bento:  Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering
:bento: Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering

Vue.js Grid ( Experiment ) ⚠️ This an experement and not a production-ready plugin Fixed size grid for Vue.js This is very a first version of the plug

Responsive grid system based on Bootstrap for Vue
Responsive grid system based on Bootstrap for Vue

Vue Grid Responsive Responsive grid system based on Bootstrap for Vue. • • Installation NPM vue 2.0 npm i vue-grid-responsive // OR yarn add vue-grid-

Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering
Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering

Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering

Flexbox based responsive fraction grid system

vue-fraction-grid Flexbox based responsive fraction grid system for Vue.js Live Demo and Full Documentation container grid vertical="middle" :rwd

A flexbox grid system.

VueFlex A flexbox grid system. demo Try it out! setup npm npm install @seregpie/vueflex Register the components globally. import Vue from 'vue'; impor

A flexbox grid system.

VueFlex A flexbox grid system. demo Try it out! setup npm npm install @seregpie/vueflex Register the components globally. import Vue from 'vue'; impor

A waterfall layout component for Vue.js
A waterfall layout component for Vue.js

vue-waterfall A waterfall layout component for Vue.js . Branch 0.x (version 0.x.x) is compatible with Vue 1 . Demo Vertical line Horizontal line Verti

Owner
Danny Funkat
Full Stack Web Developer
Danny Funkat
Vue Layout System is a pack of Vue components that solve daily layout problems.

Vue Layout System is a pack of Vue components that solve daily layout problems.

boyin.lee 6 May 30, 2021
Layoutit grid is a CSS Grid layout generator

Layoutit grid is a CSS Grid layout generator. Quickly draw down web pages layouts with our clean editor, and get HTML and CSS code to quickstart your next project.

Leniolabs_ 1.3k Oct 4, 2022
🌊 A horizontal sorting waterfall layout component for Vue.js, realized by flex layout

vue-flex-waterfall A horizontal sorting waterfall layout component for Vue.js, realized by flex layout. Refer to CSS masonry with flexbox, :nth-child(

神代綺凛 27 Jul 13, 2022
A draggable and resizable grid layout, for Vue.js.

vue-grid-layout Documentation Website What is Vue Grid Layout? vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired by

JBay Solutions 5.9k Oct 3, 2022
Auto responsive grid layout library for Vue.

autoresponsive-vue Auto responsive grid layout library for Vue. Examples Live demo & docs: xudafeng.github.io/autoresponsive-vue Installation $ npm i

达峰的夏天 138 Sep 30, 2022
Simple, Light-weight and Flexible Vue.js component for grid layout.

vue-grd Simple, Light-weight and Flexible Vue.js component for grid layout. Vue.js port of grd. Install npm install --save vue-grd Usage You can use <

Shogo Sensui 43 Jun 30, 2022
Vue Repsonsive Grid Layout

VueResponsiveGridLayout 1.2.0 Responsive draggable and resizable grid layout for VueJS. Its responsiveness is based on breakpoints (similar to Bootstr

lukerem 82 Jan 18, 2022
A draggable and resizable grid layout, for Vue.js.

vue-grid-layout Documentation Website What is Vue Grid Layout? vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired by

JBay Solutions 5.9k Sep 29, 2022
Auto responsive grid layout library for Vue.

autoresponsive-vue Auto responsive grid layout library for Vue. Examples Live demo & docs: xudafeng.github.io/autoresponsive-vue Installation $ npm i

达峰的夏天 138 Sep 30, 2022
A draggable and resizable grid layout, for Vue.js.

vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired by React-Grid-Layout

ibrahem kamal 0 Aug 26, 2020