Learn the grid? There are already such comprehensive layout generation tools

[Demo | Changelog]

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

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

# install with yarn    
yarn add vue-grid-layout
Copy the code

Import the library

    import VueGridLayout from 'vue-grid-layout';Copy the code

Add to other Vue components

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

    <script src="vue-grid-layout.umd.min.js"></script>Copy the code

• 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 GridItem documentation below for more informations.

• 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.

• 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

    <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"
    >

        <grid-item v-for="item in layout"
                   :x="item.x"
                   :y="item.y"
                   :w="item.w"
                   :h="item.h"
                   :i="item.i"
                   @resize="resizeEvent"
                   @move="moveEvent"
                   @resized="resizedEvent"
                   @moved="movedEvent">
            {{item.i}}
        </grid-item>
    </grid-layout>Copy the code

• layoutCreatedEvent

  Layout created event

  Emited on the component created lifecycle hook

    layoutCreatedEvent: function(newLayout){
      console.log("Created layout: ", newLayout)
    }Copy the code

• layoutBeforeMountEvent

  Layout beforeMount event

  Emited on the component beforeMount lifecycle hook

    layoutBeforeMountEvent: function(newLayout){
      console.log("beforeMount layout: ", newLayout)
    }Copy the code

• layoutMountedEvent

  Layout mounted event

  Emited on the component mounted lifecycle hook

    layoutMountedEvent: function(newLayout){
      console.log("Mounted layout: ", newLayout)
    }Copy the code

• layoutReadyEvent

  Layout ready event

  Emited when all the operations on the mount hook finish

    layoutReadyEvent: function(newLayout){
      console.log("Ready layout: ", newLayout)
    }Copy the code

• 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)
    }Copy the code

• 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);
    },Copy the code

• 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);
    },Copy the code

• 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);
    },Copy the code

• 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);
    },Copy the code

• Basic grid layout
• Responsive
• Draggable grid items
• Resizable grid items
• Static elements
• Min/max w/h per item