demo/responsive.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Responsive column</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>
    <h1>Responsive: by column size</h1>
    <p>Using new v10 <code>GridStackOptions.columnOpts: { columnWidth: x }</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">
        <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>
    </div>
    <br/>
    <div class="grid-stack">
    </div>
  </div>

  <script type="text/javascript">
    let text = document.querySelector('#column-text');

    function addWidget() {
      grid.addWidget({x:0, y:0, w:4, id:count++, content: '4x1'});
    };
    
    let count = 0;
    let items = [ // our initial 12 column layout loaded first so we can compare
      {x: 0, y: 0},
      {x: 1, y: 0, w: 2, h: 2},
      {x: 4, y: 0, w: 2},
      {x: 1, y: 3, w: 4},
      {x: 5, y: 3, w: 2},
      {x: 0, y: 4, w: 12}
    ];
    items.forEach(n => {n.id = count; n.content = String(count++)});

    let grid = GridStack.init({
      cellHeight: 80, // use 'auto' to make square
      animate: false, // show immediate (animate: true is nice for user dragging though)
      columnOpts: {
        columnWidth: 100, // wanted width
      },
      children: items,
      float: true })
    .on('change', (ev, gsItems) => text.innerHTML = grid.getColumn());
    text.innerHTML = grid.getColumn();
  </script>
</body>
</html>