title: How to make Angular Gridster dynamically change column length on resizing window
body: <p>I'm having this issue where when I resize the browser window, all the elements in the grid get cluttered on top of each other. I have added the link to how it looks before and after resizing window. </p>
  
  <p><strong>After resizing</strong>
  <a href="https://i.stack.imgur.com/NznhR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NznhR.png" alt="enter image description here"></a></p>
  
  <p><strong>Before resizing</strong>
  <a href="https://i.stack.imgur.com/bzcqC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bzcqC.png" alt="enter image description here"></a></p>
  
  <p>The gridster options are as below:</p>
  
  <pre><code>$scope.gridsterOpts = {
      columns: 10, // the width of the grid, in columns
      pushing: false, // whether to push other items out of the way on move or resize
      floating: true, // whether to automatically float items up so they stack (you can temporarily disable if you are adding unsorted items with ng-repeat)
      swapping: true, // whether or not to have items of the same size switch places instead of pushing down if they are the same size
      width: 'auto', // can be an integer or 'auto'. 'auto' scales gridster to be the full width of its containing element
      colWidth: 'auto', // can be an integer or 'auto'.  'auto' uses the pixel width of the element divided by 'columns'
      rowHeight: 'match', // can be an integer or 'match'.  Match uses the colWidth, giving you square widgets.
      margins: [30, 30], // the pixel distance between each widget
      outerMargin: true, // whether margins apply to outer edges of the grid
      isMobile: false, // stacks the grid items if true
      mobileBreakPoint: 600, // if the screen is not wider that this, remove the grid layout and stack the items
      mobileModeEnabled: true, // whether or not to toggle mobile mode when screen width is less than mobileBreakPoint
      minColumns: 1, // the minimum columns the grid must have
      minRows: 1, // the minimum height of the grid, in rows
      maxRows: 100,
      defaultSizeX: 2, // the default width of a gridster item, if not specifed
      defaultSizeY: 1, // the default height of a gridster item, if not specified
      minSizeX: 1, // minimum column width of an item
      maxSizeX: 1, // maximum column width of an item
      minSizeY: 1, // minumum row height of an item
      maxSizeY: 1, // maximum row height of an item
      resizable: {
          enabled: false,
          handles: ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw'],
          start: function(event, $element, widget) {}, // optional callback fired when resize is started,
          resize: function(event, $element, widget) {}, // optional callback fired when item is resized,
          stop: function(event, $element, widget) {} // optional callback fired when item is finished resizing
      },
      draggable: {
          enabled: true, // whether dragging items is supported
          handle: '.my-class', // optional selector for resize handle
          start: function(event, $element, widget) {}, // optional callback fired when drag is started,
          drag: function(event, $element, widget) {}, // optional callback fired when item is moved,
          stop: function(event, $element, widget) {} // optional callback fired when item is finished dragging
      }
  };
  
  };
  </code></pre>