gridstack.js issue base

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

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack-all.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack-extra.min.css">
<div class="grid-stack"></div>

CSS

.grid-stack {
  width: 100%;
}

.grid-stack .grid-stack-item {
  aspect-ratio: 16/9;
}

.grid-stack .grid-stack-item .grid-stack-item-content {
  --tw-bg-opacity: 1;
  background-color: rgb(56 189 248 / var(--tw-bg-opacity, 1));
  aspect-ratio: 16/9;
}

JavaScript

const items = [
  { id: "a", content: "a" },
  { id: "b", content: "b" },
  { id: "c", content: "c" },
  { id: "d", content: "d" },
]

var options = {
  float: true,
  column: 9,
  handles: "se",
}

var grid = GridStack.init(options)

grid.on("resizestart", function (event, el) {
  if (el.gridstackNode) {
    grid.update(el, { h: el.gridstackNode.w })
  }
})

// If enabled will crash
//grid.on('resize', function (event, el) {
//   if (el.gridstackNode) {
//     grid.update(el, {h: el.gridstackNode.w})
//   }
//})

grid.on("resizestop", function (event, el) {
  console.log("resizestop", el.gridstackNode)

  if (el.gridstackNode) {
    grid.update(el, { h: el.gridstackNode.w ?? 2 })
  }
})

grid.cellHeight(grid.cellWidth() / (16 / 9))

grid.load(items)