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>

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: 3,
    h: 4,
  },
  {
    x: 3,
    y: 0,
    w: 9,
    h: 2,
  },
  {
    x: 3,
    y: 2,
    w: 9,
    h: 1,
  },
  {
    x: 3,
    y: 3,
    w: 3,
    h: 1,
  },
  {
    x: 6,
    y: 3,
    w: 3,
    h: 1,
  },
  {
    x: 9,
    y: 3,
    w: 3,
    h: 1,
  },
]
items.forEach((w) => {
  w.content = String(count++)
  // grid.addWidget(w)
})

var options = {
  column: 12,
  columnOpts: {
    breakpoints: [ { w: 1280, c: 1 } ],
    breakpointForWindow: true,
  },
}
var grid = GridStack.init(options).load(items)