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@10.0.1/dist/gridstack.min.css">
<script src="https://cdn.jsdelivr.net/npm/gridstack@10.0.1/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>
<button onClick="addNewWidget()">Add widget using .addWidget()</button>
<button onClick="loadNewWidget()">Add widget using .load()</button>

<div class="grid-stack"></div>

<hr/>
<textarea readonly rows="20" id="text" style="width: 100%;"></textarea>

CSS

.grid-stack {
  background: lightgoldenrodyellow;
}

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

JavaScript

saveGrid = function() {
  items = grid.save();
  document.querySelector('#text').innerHTML = JSON.stringify(items, ' ', 2)
}

var count = 0;
var items = [
	{x: 0, y: 0, w: 2, h: 2},
	{x: 2, y: 0, w: 8, h: 2},
  {x: 0, y: 2, w: 6, h: 2},
  {x: 6, y: 2, w: 3, h: 2},
  {x: 9, y: 2, w: 3, h: 2},
  {x: 0, y: 4, w: 5, h: 3},
].map(w => ({
  ...w,
  id: String(count),
  content: String(count++)
}));

var options = { // put in gridstack options here
  float: false
};
var grid = GridStack.init(options).load(items);
grid.on('change added', saveGrid);
saveGrid();

createNode = function (str) {
  return {
    id: String(count),
    w: 3,
    h: 3,
    content: `${count++} ${str}`,
  };
}

// Gets placed in the next hortizontal open slot
addNewWidget = function () {
  grid.addWidget(createNode('added'));
  return false;
};

// Gets placed at the bottom of a grid
loadNewWidget = function () {
  items.push(createNode('loaded'));
  grid.load(items);
  return false;
}