gridstack.js issue base

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

HTML

<script src="https://cdn.jsdelivr.net/npm/gridstack@10.2.1/dist/gridstack-all.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@10.2.1/dist/gridstack.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@10.2.1/dist/gridstack-extra.min.css">
<div>
    <h1>Responsive: using breakpoint</h1>
    <p>Using new v10 <code>GridStackOptions.columnOpts: { breakpoints: [] }</code></p>
    <div>
      <span>Number of Columns:</span> <span id="column-text"></span>
    </div>
    <div>
      <label>Choose re-layout:</label>
      <select onchange="grid.opts.columnOpts.layout = this.value;localStorage.setItem('layout',this.value)">
        <option value="moveScale">move + scale</option>
        <option value="move">move</option>
        <option value="scale">scale</option>
        <option value="list">list</option>
        <option value="compact">compact</option>
        <option value="none">none</option>
      </select>
      <a onClick="grid.removeAll()" class="btn btn-primary" href="#">Clear</a>
      <a onClick="addWidget()" class="btn btn-primary" href="#">Add Widget</a>
      <a onClick="save()" class="btn btn-primary" href="#">Save</a>
      <a onClick="load()" class="btn btn-primary" href="#">Load</a>
    </div>
    <br/>
    <div class="grid-stack">
    </div>
  </div>

CSS

.grid-stack {
  background: lightgoldenrodyellow;
}

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

JavaScript

let text = document.querySelector('#column-text');

    function addWidget() {
      grid.addWidget({x:0, y:0, w:4, id:count++, content: '4x1'});
    }
    
    function save () {
	    const items = grid.save()
	    localStorage.setItem('items', JSON.stringify(items));
      console.log('saving item 2:', items[2]);
    }
    
    function load() {
      const items = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : 
      [ // our initial 12 column layout loaded first so we can compare
        {id: 10, x: 0, y: 0, content: '0'},
        {id: 1, x: 1, y: 0, w: 2, h: 2, minW: 2, content: '1'},
        {id: 2, x: 4, y: 0, w: 2, content: '2'},
        {id: 3, x: 1, y: 3, w: 4, content: '3'},
        {id: 4, x: 5, y: 3, w: 2, content: '4'},
        {id: 5, x: 0, y: 4, w: 12, content: '5'}
      ];
      console.log('loading item 2:', items[2])
    	grid.load(items)
    }
    
    
    let layout = localStorage.getItem('layout') ?? 'compact';
    document.querySelector('select').value = layout

    let grid = GridStack.init({
      cellHeight: 80,
      columnOpts: {
        breakpointForWindow: true,  // test window vs grid size
        breakpoints: [{w:700, c:1},{w:850, c:3},{w:950, c:6},{w:1100, c:8}],
        layout
      },
      float: true })
    .on('added change', (ev, gsItems) => {
    	text.innerHTML = grid.getColumn();
    });
    text.innerHTML = grid.getColumn();