demo/responsive.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Responsive grid demo</title>

  <link rel="stylesheet" href="demo.css"/>
  <link rel="stylesheet" href="../dist/gridstack-extra.css"/>

  <script src="../src/jquery.js"></script>
  <script src="../src/gridstack.js"></script>
  <script src="../src/jquery-ui.js"></script>
  <script src="../src/gridstack.jQueryUI.js"></script>
</head>
<body>
  <div>
    <h1>Responsive grid demo</h1>
    <div>
      <span>Number of Columns:</span> <span id="column-text"></span>
    </div>
    <br/>
    <div class="grid-stack">
    </div>
  </div>

  <script type="text/javascript">
    var grid = GridStack.init({
      disableOneColumnMode: true, // will manually do 1 column
      float: true });
    var text = document.querySelector('#column-text');
    
    function resizeGrid() {
      var width = document.body.clientWidth;
      if (width < 700) {
        grid.column(1);
        text.innerHTML = 1;
      } else if (width < 850) {
        grid.column(3);
        text.innerHTML = 3;
      } else if (width < 950) {
        grid.column(6);
        text.innerHTML = 6;
      } else if (width < 1100) {
        grid.column(8);
        text.innerHTML = 8;
      } else {
        grid.column(12);
        text.innerHTML = 12;
      }
    };
    
    var items = [
      {x: 0, y: 0, width: 2, height: 2},
      {x: 2, y: 0, width: 2, height: 1},
      {x: 5, y: 0, width: 1, height: 1},
      {x: 1, y: 3, width: 4, height: 1},
      {x: 5, y: 2, width: 2, height: 1},
      {x: 0, y: 4, width: 12, height: 1}
    ];
    grid.batchUpdate();
    items.forEach(function(node, index) {
      grid.addWidget('<div><div class="grid-stack-item-content">' + index + '</div></div>', node);
    });
    grid.commit();
    resizeGrid();

    window.addEventListener('resize', function() {resizeGrid()});
  </script>
</body>
</html>