gridstack.js issue base

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

by CristianCG

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@8.2.0/dist/gridstack.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@8.2.0/dist/gridstack-extra.min.css">
<script src="https://cdn.jsdelivr.net/npm/gridstack@8.2.1/dist/gridstack-all.js"></script>
<div class="c-grid"></div>

SCSS

.c-grid {
  width: calc(100vw - 30px);
  height: calc(100vh - 30px);
  background: lightgrey;
  border-radius: 5px;
  
  .grid-stack-item-content {
    background: grey;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    span {
      color: white;
      font-size: 3em;
    }
  }
}

body {
  padding: 15px;
  margin: 0;
  font-family: verdana;
}

JavaScript

let options = {
  cellHeight: 200,
  margin: '15px',
  disableResize: true,
  disableOneColumnMode: true,
  column: 4
};

let gridSelector = '.c-grid'

let grid = GridStack.init( options, gridSelector);

const addWidget = (count) => {
  var node = {
  	autoPosition: true,
    content: `<span>${count}</span>`
   };
  grid.addWidget(node);
  return false;
};

const resizedPage = () => {  
  let gridWidth = $(".c-grid").width();
  let ncolumns = Math.floor(gridWidth / (options.cellHeight + 15))

  if (ncolumns > 4) {
    ncolumns = 4;
  } else if(ncolumns < 1) {
  	ncolumns = 1;
  }
  for(let i = 1; i <= ncolumns; i++) {
  	grid.column(i, 'none');
  }
}

let resizeTimepout = null;
$(window).resize(function () {
  if (resizeTimepout) clearTimeout(resizeTimepout);
  resizeTimepout = setTimeout(resizedPage, 125);
});    
        
for(let i = 1; i <= 8; i++) {
	addWidget(i);
}