gridstack.js issue base

Use this as a base for examples for gridstack.js issues.

by Rainbowlemon

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@3.1.2/dist/gridstack.min.css">
<script src="https://cdn.jsdelivr.net/npm/gridstack@3.1.2/dist/gridstack-h5.js"></script>
<h1>gridstack.js initial ordering issue</h1>

<div id="lists-container">
  <section id="list-in-order">
    <h2>
      HTML ordered same as gs-y
    </h2>
    <div class="grid-stack">
      <div class="grid-stack-item" gs-x="0" gs-y="0" gs-w="12" gs-h="1">
        <div class="grid-stack-item-content">
          This should be at position <span class="order-number">0</span>
        </div>
      </div>
      <div class="grid-stack-item" gs-x="0" gs-y="1" gs-w="12" gs-h="1">
        <div class="grid-stack-item-content">
          This should be at position <span class="order-number">1</span>
        </div>
      </div>
      <div class="grid-stack-item" gs-x="0" gs-y="2" gs-w="12" gs-h="1">
        <div class="grid-stack-item-content">
          This should be at position <span class="order-number">2</span>
        </div>
      </div>
      <div class="grid-stack-item" gs-x="0" gs-y="3" gs-w="12" gs-h="1">
        <div class="grid-stack-item-content">
          This should be at position <span class="order-number">3</span>
        </div>
      </div>
      <div class="grid-stack-item" gs-x="0" gs-y="4" gs-w="12" gs-h="1">
        <div class="grid-stack-item-content">
          This should be at position <span class="order-number">4</span>
        </div>
      </div>
      <div class="grid-stack-item" gs-x="0" gs-y="5" gs-w="12" gs-h="1">
        <div class="grid-stack-item-content">
          This should be at position <span class="order-number">5</span>
        </div>
      </div>
      <div class="grid-stack-item" gs-x="0" gs-y="6" gs-w="12" gs-h="1">
        <div class="grid-stack-item-content">
          This should be at position <span class="order-number">6</span>
        </div>
      </div>
      <div class="grid-stack-item" gs-x="0" gs-y="7" gs-w="12" gs-h="1">
       ...

CSS

h2 {
  text-align: center;
}

.grid-stack-item-content {
  color: #2c3e50;
  background-color: #18bc9c;
  display: flex;
  align-items: center;
  justify-content: center;
}

.order-number {
  color: #fff;
  background: #d22;
  display: inline-block;
  height: 1.5rem;
  line-height: 1.5;
  padding: 0 .5rem;
  vertical-align: middle;
  text-align: center;
  margin-left: 0.5rem;
  border-radius: 1000px;
}

#lists-container > section {
  width: 50%;
  float: left;
}


/*
.grid-stack > .grid-stack-item {
  overflow-y: auto;
}

.grid-stack > .grid-stack-item[gs-w='1'] {
  width: 33.33333%;
}

.grid-stack > .grid-stack-item[gs-x='1'] {
  left: 33.33333%;
}

.grid-stack > .grid-stack-item[gs-min-w='1'] {
  min-width: 33.33333%;
}

.grid-stack > .grid-stack-item[gs-max-w='1'] {
  max-width: 33.33333%;
}

.grid-stack > .grid-stack-item[gs-w='2'] {
  width: 66.66667%;
}

.grid-stack > .grid-stack-item[gs-x='2'] {
  left: 66.66667%;
}

.grid-stack > .grid-stack-item[gs-min-w='2'] {
  min-width: 66.66667%;
}

.grid-stack > .grid-stack-item[gs-max-w='2'] {
  max-width: 66.66667%;
}

.grid-stack > .grid-stack-item[gs-w='3'] {
  width: 100%;
}

.grid-stack > .grid-stack-item[gs-x='3'] {
  left: 100%;
}

.grid-stack > .grid-stack-item[gs-min-w='3'] {
  min-width: 100%;
}

.grid-stack > .grid-stack-item[gs-max-w='3'] {
  max-width: 100%;
}
*/

JavaScript

var options = { // put in gridstack options here
  disableOneColumnMode: true, // for jfiddle small window size
  cellHeight: 100,
  marginTop: 10,
  marginBottom: 10,
  resizable: {
    handles: 'se, sw'
  },
};

var grid = GridStack.initAll(options);