gridstack.js issue base
Use this as a base for examples for gridstack.js issues.
HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@10.0.1/dist/gridstack.min.css">
<script src="https://cdn.jsdelivr.net/npm/gridstack@10.0.1/dist/gridstack-all.js"></script>
<h1>gridstack.js base demo for issues</h1>
<p>Fork and modify me to demonstrate your issue when creating an issue for gridstack.js</p>
<div class="grid-stack-item" gs-w="2" gs-h="2">
<div class="grid-stack-item-content">2x2</div>
</div>
<div class="grid-stack"></div>
CSS
.grid-stack {
background: lightgoldenrodyellow;
}
.grid-stack-item-content {
color: #2c3e50;
text-align: center;
background-color: #18bc9c;
}
JavaScript
var count = 0;
var items = [
{x: 0, y: 0, w: 2, h: 2},
{x: 2, y: 0, w: 2, h: 2},
{x: 4, y: 0, w: 2, h: 2},
{x: 6, y: 0, w: 2, h: 2},
{x: 8, y: 0, w: 2, h: 2},
];
items.forEach(w => w.content = String(count++));
var options = { // put in gridstack options here
float: false,
acceptWidgets: true,
maxRow: 2
};
var grid = GridStack.init(options).load(items);
GridStack.setupDragIn('.grid-stack-item', { appendTo: 'body', helper: 'clone' });