gridstack.js position issue

Demonstrates incorrect positioning of items in a grid.

by Alain Dumesny

HTML

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gridstack@latest/dist/gridstack.all.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@latest/dist/gridstack.min.css" />

<div class="grid-stack">

  <div class="grid-stack-item"
       data-gs-x="0" data-gs-y="27"
       data-gs-width="12" data-gs-height="7">
    <div class="grid-stack-item-content">
      item 1
    </div>
  </div>

  <div class="grid-stack-item"
       data-gs-x="0" data-gs-y="20"
       data-gs-width="12" data-gs-height="7">
    <div class="grid-stack-item-content" >
      item 2
    </div>
  </div>

  <div class="grid-stack-item"
       data-gs-x="0" data-gs-y="0"
       data-gs-width="12" data-gs-height="9">
    <div class="grid-stack-item-content">
      item 3
    </div>
  </div>

  <div class="grid-stack-item"
       data-gs-x="0" data-gs-y="14"
       data-gs-width="7" data-gs-height="6">
    <div class="grid-stack-item-content">
      item 4
    </div>
  </div>

  <div class="grid-stack-item"
       data-gs-x="7" data-gs-y="14"
       data-gs-width="5" data-gs-height="6">
    <div class="grid-stack-item-content">
      item 5
    </div>
  </div>

  <div class="grid-stack-item"
       data-gs-x="0" data-gs-y="9"
       data-gs-width="12" data-gs-height="5">
    <div class="grid-stack-item-content">
      item 6
    </div>
  </div>

</div>

JavaScript

var options = {
  resizable: {
    handles: 'se, sw',
    float: true
  }
};
var grid = $('.grid-stack').gridstack(options);