demo/column.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Column grid demo</title>

  <link rel="stylesheet" href="demo.css"/>
  <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
  <script src="../dist/gridstack.all.js"></script>
</head>
<body>
  <div class="container-fluid">
    <h1>column() grid demo</h1>
    <div><span>Number of Columns:</span> <span id="column-text">12</span></div>
    <div>
      <a onClick="addWidget()" class="btn btn-primary" href="#">Add Widget</a>
      <a onClick="setOneColumn(false)" class="btn btn-primary" href="#">1 Column</a>
      <a onClick="setOneColumn(true)" class="btn btn-primary" href="#">1 Column DOM</a>
      <a onClick="column(2)" class="btn btn-primary" href="#">2 Column</a>
      <a onClick="column(3)" class="btn btn-primary" href="#">3 Column</a>
      <a onClick="column(4)" class="btn btn-primary" href="#">4 Column</a>
      <a onClick="column(6)" class="btn btn-primary" href="#">6 Column</a>
      <a onClick="column(8)" class="btn btn-primary" href="#">8 Column</a>
      <a onClick="column(10)" class="btn btn-primary" href="#">10 Column</a>
      <a onClick="column(12)" class="btn btn-primary" href="#">12 Column</a>
    </div>
    <br>
    <div class="grid-stack"></div>
  </div>

  <script type="text/javascript">
    let grid = GridStack.init({float: true});
    let text = document.querySelector('#column-text');

    grid.on('added removed change', function(e, items) {
      let str = '';
      items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
      console.log(e.type + ' ' + items.length + ' items:' + str );
    });

    let items = [
      /* match karma testing
      {x: 0, y: 0, width: 4, height: 2},
      {x: 4, y: 0, width: 4, height: 4},
      {text: ' auto'},
      */
      {x: 0, y: 0, width: 2, height: 2},
      {x: 2, y: 0, width: 2, height: 1},
      {x: 5, y: 1, width: 1, height: 1},
      {x: 5, y: 0, width: 2, height: 1},
      // {x: 0, y: 0, width: 1, height: 1}, // conflict
      {text: ' auto'}, // autoPosition testing
      // {x: 4, y: 0, width: 1, height: 1}, // same auto-pos
      {x: 5, y: 3, width: 2, height: 1},
      {x: 0, y: 4, width: 12, height: 1}
    ];
    let count = 0;
    grid.batchUpdate();
    addWidget(); addWidget(); addWidget(); addWidget();
    grid.commit();

    function addWidget() {
      let n = items[count] || {
        x: Math.round(12 * Math.random()),
        y: Math.round(5 * Math.random()),
        width: Math.round(1 + 3 * Math.random()),
        height: Math.round(1 + 3 * Math.random())
      };
      grid.addWidget('<div><div class="grid-stack-item-content"><button onClick="grid.removeWidget(this.parentNode.parentNode)">X</button><br>'
        + count++ + (n.text ? n.text : '') + '</div></div>', n);
    };

    function column(n) {
      grid.column(n);
      text.innerHTML = n;
    }
    function setOneColumn(dom) {
      grid.opts.oneColumnModeDomSort = dom;
      grid.column(1);
      text.innerHTML = dom ? '1 DOM' : '1';
    }

  </script>
</body>
</html>