GridStack.js resize issue

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

by Alain Dumesny

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-extra.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack.min.css">
    <div>
      <span>Number of Columns:</span> <span id="column-text"></span>
    </div>
<div class="grid-stack"></div>

CSS

.grid-stack {
  background: lightgoldenrodyellow;
}

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

JavaScript

const text = document.querySelector("#column-text")
const items = [
  { w: 3, h: 6 },
  { w: 6, h: 3 },
  { w: 3, h: 6 },
  { w: 6, h: 3 },
]
items.forEach((n, idx) => {
  n.id = idx+1
  n.content = String(idx+1)
})

const grid = GridStack.init({
  cellHeight: 40,
  columnOpts: {
    layout: 'compact',
    breakpoints: [
            { w: 700, c: 1 },
            { w: 900, c: 3 },
            { w: 1000, c: 6 },
            { w: 1100, c: 9 }
    ],
  },
  children: items
}).on("change", (ev, gsItems) => (text.innerHTML = grid.getColumn()))
text.innerHTML = grid.getColumn()