JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@10.1.2/dist/gridstack.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@10.1.2/dist/gridstack-extra.min.css">
<script src="https://cdn.jsdelivr.net/npm/gridstack@10.1.2/dist/gridstack-all.min.js"></script>
<div>
  <h1>Responsive: using breakpoint</h1>
  <p>Using new v10 <code>GridStackOptions.columnOpts: { breakpoints: [] }</code></p>
  
  <div class="grid-stack gs-3">
    
    <div class="grid-stack-item" gs-x="0" gs-y="0" gs-h="23">
      <div class="grid-stack-item-content">0</div>
    </div>
    <div class="grid-stack-item" gs-x="1" gs-y="0" gs-h="23">
      <div class="grid-stack-item-content">1</div>
    </div>
    <div class="grid-stack-item" gs-x="2" gs-y="0" gs-h="23">
      <div class="grid-stack-item-content">2</div>
    </div>
    <div class="grid-stack-item" gs-x="0" gs-y="23" gs-h="25">
      <div class="grid-stack-item-content">3</div>
    </div>
    <div class="grid-stack-item" gs-x="1" gs-y="23" gs-h="25">
      <div class="grid-stack-item-content">4</div>
    </div>
 
  </div>
</div>

JavaScript

let text = document.querySelector('#column-text');

function addWidget() {
  grid.addWidget({x:0, y:0, w:4, id:count++, content: '4x1'});
}

let count = 0;
let items = [ // our initial 12 column layout loaded first so we can compare
  {x: 0, y: 0, w: 1, h: 23},
  {x: 1, y: 0, w: 1, h: 23},
  {x: 2, y: 0, w: 1, h: 23},
  {x: 0, y: 23, w: 1, h: 25},
  {x: 1, y: 23, w: 1, h: 25}
];
items.forEach(n => {n.id = count; n.content = String(count++)});

let grid = GridStack.init({
	column: 3,
  cellHeight: 16,
  margin: 8,
  animate: false,
  disableDrag: true,
  disableResize: true,
  // children: items,
  columnOpts: {
    breakpointForWindow: true,
    breakpoints: [{w:600, c:1}]
  }
 })