I have a simple page with a few boxes in it and I want to nest it with gridstackjs.
I’ve read the nested layout example in the gridstackjs documentation, but I’m not going to create it with JavaScript code.
One of the ways to work with gridstackjs is to reach the desired output by html (DOM created items) codes:

// ...in your HTML
<div class="grid-stack">
  <div class="grid-stack-item">
    <div class="grid-stack-item-content">Item 1</div>
  </div>
  <div class="grid-stack-item" gs-w="2">
    <div class="grid-stack-item-content">Item 2 wider</div>
  </div>
</div>
// ...in your script
GridStack.init();

And I’m going to create the nested layout in this way (DOM). For example, like this:

// ...in your HTML
<div class="grid-stack">
  <div class="grid-stack-item">
    <div class="grid-stack-item-content">
      <div class="grid-stack">
        <div class="grid-stack-item">
          <div class="grid-stack-item-content">
            nested_1
          </div>
        </div>
        <div class="grid-stack-item">
          <div class="grid-stack-item-content">
            nested_2
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="grid-stack-item" gs-w="2">
    <div class="grid-stack-item-content">Item 2 wider</div>
  </div>
</div>
// ...in your script
GridStack.init();