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

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

See also responsiveLayouts and cols

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

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