Demonstrate grid layout with various sized blocks

by Alain Dumesny

HTML

<script src=" https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack-all.js "></script>
<link
  href=" https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack.min.css "
  rel="stylesheet"
/>

<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">
  <div>A</div>
  <div>B</div>
</div>

CSS

.grid-stack {
  background: lightgoldenrodyellow;
  .grid-stack-item-content {
    color: #2c3e50;
    text-align: center;
    background-color: #18bc9c;
  }
}

JavaScript

var options = {
  alwaysShowResizeHandle: true,
  column: 12,
  margin: 10
}
var grid = GridStack.init(options)

document.querySelectorAll(".grid-stack div").forEach(e => {
  grid.makeWidget(e,{
					minW: 3,
					w: 5,
					minH: 2,
					h: 3,
				})
})