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

See also responsive, breakpoints and cols

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

# isBounded

type: Boolean
required: false
default: false

Says if the grid items are bounded to the container when dragging

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

# restoreOnDrag

type: Boolean
required: false
default: false

Says if the moved grid items should be restored after an item has been dragged over.

# 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

See also responsiveLayouts, breakpoints and cols

# breakpoints

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

Breakpoints defined for responsive layout, the parameter represents the width of different devices:lg(large), md(medium), sm(small), xs(extra small). 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

# useStyleCursor

type: Boolean
required: false
default: true

Says if set the styleCursor option to true. When dragging freezes, setting this value to false may alleviate problems. This property is not reactive

# transformScale

type: Number
required: false
default: 1

Sets a scaling factor to the size of the grid items, 1 is 100%

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

# isBounded

type: Boolean
required: false
default: null

Says if the item is bounded to the container when dragging.

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 (opens new window).

# 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 (opens new window).

# 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 (opens new window).

# preserveAspectRatio

type: Boolean
required: false
default: false

If 'true', forces the GridItem to preserve its aspect ratio when resizing.

# dragOption

type: Object
required: false
default: {}

Passthrough object for the grid item interact.js draggable configuration (opens new window)

# resizeOption

type: Object
required: false
default: {}

Passthrough object for the grid item interact.js resizable configuration (opens new window)

← Usage Events →