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="0"
       data-gs-width="12" data-gs-height="9">
    <div class="grid-stack-item-content" style="border: 3px solid #000">Row 1: x=0, y=0, width=12, height=9</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" style="border: 3px solid #000">Row 2: x=0, y=9, width=12, height=5</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" style="border: 3px solid #000">Row 3 Item 1: x=0, y=14, width=7, height=6</div>
  </div>

  <div class="grid-stack-item"
       data-gs-x="8" data-gs-y="14"
       data-gs-width="5" data-gs-height="6">
    <div class="grid-stack-item-content" style="border: 3px solid #000">Row 3 Item 2: x=7, y=14, width=5, height=6</div>
  </div>

</div>

JavaScript

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