# 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](#responsive), [breakpoints](#breakpoints) and [cols](#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](#responsivelayouts), [breakpoints](#breakpoints) and [cols](#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](#responsivelayouts) and [cols](#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**
           

### 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](http://interactjs.io/docs/#ignorable-selectors).

### 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](http://interactjs.io/docs/#ignorable-selectors).

### 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](http://interactjs.io/docs/#ignorable-selectors).


### 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](https://interactjs.io/docs/draggable/)   
         
### resizeOption

* type: `Object`
* required: `false`
* default: `{}`

Passthrough object for the grid item [interact.js resizable configuration](https://interactjs.io/docs/resizable/)   
         
