title: Way to create empty space in gridster js
body: <p>I am doing project in jquery to display the bus map as rows and columns. For that I am using <i>gridster.js</i> to display the seat arrangement. I am having the piece of following code </p>
  
  <pre><code>$(".gridster ul", xxxMapContainerST).each(function(){ 
              var gridster =$(this).gridster({ 
                  widget_margins : [ 1, 1 ], 
                  widget_base_dimensions : [ 30, 30 ], 
                  draggable : false, 
                  avoid_overlapped_widgets : false, 
                  extra_rows : 0, 
                  extra_cols : 0, 
                  resize:false                                         
              }).data('gridster').disable(); 
          });
  </code></pre>
  
  <p>Here the problem arise is when I want to display empty seats i.e not a cornered seats. <b>The empty seat position was filled by the adjacent seats (filled by vertically down position seats). It causes severe misalignment.</b> I have googled . No obvious solution found. Anyone kindly do some remedy for this problem. </p>
  
  <p>Below link raises the same question, yet no answer found</p>
  
  <p><a href="https://stackoverflow.com/questions/24393704/make-gridster-js-tiles-stick-in-specific-grid-positions-snap-to-grid">Make gridster.js tiles stick in specific grid positions (snap to grid)</a></p>