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.0/dist/gridstack.min.css">
<script src="https://cdn.jsdelivr.net/npm/gridstack@10.0.0/dist/gridstack-all.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@10.0.0/dist/gridstack-extra.min.css">
<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 class="grid-stack" id="gs">
  <div gs-w="1" gs-h="3" gs-auto-position="true" class="grid-stack-item">
    <div class="grid-stack-item-content">
      <div>
        hello<br />
        world<br />
        hello<br />
        world<br />
      </div>
    </div>
  </div>

  <div gs-w="3" gs-h="2" gs-auto-position="true" class="grid-stack-item">
    <div class="grid-stack-item-content">
      <div>
        hello<br />
        world<br />
        hello<br />
        world<br />
      </div>
    </div>
  </div>

  <div id="myid" gs-w="6" gs-h="6" gs-auto-position="true" class="grid-stack-item">
    <div class="grid-stack-item-content">
      <div class="grid-stack grid-stack-nested">
        <div gs-w="3" gs-h="2" gs-auto-position="true" class="grid-stack-item">
          <div class="grid-stack-item-content">
            <div>
              SUBGID hello<br />
              world<br />
              hello<br />
              world<br />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.grid-stack {
  background: lightgoldenrodyellow;
}

.grid-stack-item-content {
  color: #2c3e50;
  text-align: center;
  background-color: #18bc9c;
}
.grid-stack > .grid-stack-item.grid-stack-sub-grid > .grid-stack-item-content {
  background: rgba(0,0,0,0.1);
  inset: 0 2px;
}
.grid-stack.grid-stack-nested {
  background: none;
  /* background-color: red; */
  /* take entire space */
  position: absolute;
  inset: 0; /* TODO change top: if you have content in nested grid */
}

JavaScript

let subOptions = {
        column: "auto", // size to match container. make sure to include gridstack-extra.min.css
        acceptWidgets: true, // will accept .grid-stack-item by default
        margin: 5,
      };
      let options = {
        // main grid options
        margin: 5,
        minRow: 2, // don't collapse when empty
        acceptWidgets: true,
      };

      // create and load it all from JSON above
      let grid = GridStack.init(options);
      grid.cellHeight(50);

      const items = GridStack.getGridElements(".grid-stack-item");
      console.log("items", items.length);
      for (let item of items) {
        grid.makeWidget(item);
      }

      const subgrids = GridStack.getGridElements("#myid");
      console.log("subgrids", subgrids.length);
      for (let subgrid of subgrids) {
        grid.makeSubGrid(subgrid, subOptions);
      }