gridstack.js issue base

Use this as a base for examples for gridstack.js issues.

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@1.1.2/dist/gridstack.min.css">
<script src="https://cdn.jsdelivr.net/npm/gridstack@1.1.2/dist/gridstack.all.js"></script>
<h1>gridstack.js base demo for issues</h1>
<p>Fork and modify me to demonstrate your issue when creating an issue for gridstack.js</p>
<div><a class="btn btn-default" onClick="addNewWidget()" href="#">Add Widget</a></div>
<br />

<div class="grid-stack">
  <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="2" data-gs-height="2">
    <div class="grid-stack-item-content">item1 </div>
  </div>
  <div class="grid-stack-item" data-gs-x="2" data-gs-y="0" data-gs-width="2" data-gs-height="1">
    <div class="grid-stack-item-content">item2</div>
  </div>
</div>

CSS

.grid-stack {
  background: lightgoldenrodyellow;
}

.grid-stack-item-content {
  color: #2c3e50;
  text-align: center;
  background-color: #18bc9c;
}
.grid-stack {
  background: lightgoldenrodyellow;
}

.grid-stack-item-content {
  color: #2c3e50;
  text-align: center;
  background-color: #18bc9c;
}
.grid-stack > .grid-stack-item[data-gs-width="64"] {
  width: 100%;
}
.grid-stack > .grid-stack-item[data-gs-x="64"] {
  left: 100%;
}
.grid-stack > .grid-stack-item[data-gs-min-width="64"] {
  min-width: 100%;
}
.grid-stack > .grid-stack-item[data-gs-max-width="64"] {
  max-width: 100%;
}
.grid-stack > .grid-stack-item[data-gs-width="63"] {
  width: 98.4375%;
}
.grid-stack > .grid-stack-item[data-gs-x="63"] {
  left: 98.4375%;
}
.grid-stack > .grid-stack-item[data-gs-min-width="63"] {
  min-width: 98.4375%;
}
.grid-stack > .grid-stack-item[data-gs-max-width="63"] {
  max-width: 98.4375%;
}
.grid-stack > .grid-stack-item[data-gs-width="62"] {
  width: 96.875%;
}
.grid-stack > .grid-stack-item[data-gs-x="62"] {
  left: 96.875%;
}
.grid-stack > .grid-stack-item[data-gs-min-width="62"] {
  min-width: 96.875%;
}
.grid-stack > .grid-stack-item[data-gs-max-width="62"] {
  max-width: 96.875%;
}
.grid-stack > .grid-stack-item[data-gs-width="61"] {
  width: 95.3125%;
}
.grid-stack > .grid-stack-item[data-gs-x="61"] {
  left: 95.3125%;
}
.grid-stack > .grid-stack-item[data-gs-min-width="61"] {
  min-width: 95.3125%;
}
.grid-stack > .grid-stack-item[data-gs-max-width="61"] {
  max-width: 95.3125%;
}
.grid-stack > .grid-stack-item[data-gs-width="60"] {
  width: 93.75%;
}
.grid-stack > .grid-stack-item[data-gs-x="60"] {
  left: 93.75%;
}
.grid-stack > .grid-stack-item[data-gs-min-width="60"] {
  min-width: 93.75%;
}
.grid-stack > .grid-stack-item[data-gs-max-width="60"] {
  max-width: 93.75%;
}
.grid-stack > .grid-stack-item[data-gs-width="59"] {
  width: 92.1875%;
}
.grid-stack > .grid-stack-item[data-gs-x="59"] {
  left: 92.1875%;
}
.grid-stack >...

JavaScript

var options = { // put in gridstack options here
  disableOneColumnMode: true, // for jfiddle small window size
  float: false,
  column: 64,
   resizable: {
                    handles: 'e, se, s, sw, w',
                    autoHide: false,
                },
};
var grid = GridStack.init(options);

var count = 0;
var items = [
  {x: 3, y: 1, width: 1, height: 2},
  {x: 0, y: 2, width: 2, height: 1},
  {x: 4, y: 1, width: 1, height: 1},
  {x: 2, y: 3, width: 3, height: 1},
  {x: 2, y: 5, width: 1, height: 1}
];

addNewWidget = function () {
  var node = items[count] || {
    x: Math.round(12 * Math.random()),
    y: Math.round(5 * Math.random()),
    width: Math.round(1 + 3 * Math.random()),
    height: Math.round(1 + 3 * Math.random())
  };
  grid.addWidget('<div><div class="grid-stack-item-content">' + count++ + '</div></div>', node);
  return false;
};