gridstack.js issue base

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

HTML

<script src="https://cdn.jsdelivr.net/npm/gridstack@11.1.2/dist/gridstack-all.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@11.1.2/dist/gridstack.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@11.1.2/dist/gridstack.min.css">
<h1>Locked not working as expected</h1>

<button onClick="addLockedItem()">Add Locked Item</button>
<button onClick="addNoResizeNorMoveItem()">Add noResize + noMove Item</button>

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

CSS

.grid-stack {
  background: lightgoldenrodyellow;
}

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

table td, table td * {
    vertical-align: top;
}

JavaScript

let idCounter = 0;

function addLockedItem() {
  grid.addWidget({
      autoPosition: true,
      w: 3,
      h: 2,
      minW: 2,
      locked: true,
      content: "Locked",
      id: "item-" + idCounter,
  });
}

function addNoResizeNorMoveItem() {
  grid.addWidget({
      autoPosition: true,
      w: 3,
      h: 2,
      minW: 2,
      noResize: true,
      noMove: true,
      content: "No Resize, No Move",
      id: "item-" + idCounter,
  });
}

let grid = GridStack.init({
  margin: 5,
  minRow: 1,
  float: true,
  column: 12,
});