JSFiddle - React, Tailwind, and code Playground

by Alain Dumesny

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.3.0/gridstack.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.3.0/gridstack.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.3.0/gridstack.jQueryUI.js"></script>
<div class="container-fluid">
  <h1>Nested grids demo - that SHOULD take entire height</h1>

  <div id="grid" class="grid-stack">
    <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="3">
      <div class="grid-stack-item-content">
        resize the other grid item --> (even to same actual size of 300pix) to trigger an event and see if the nested grid grows to take entire height.
      </div>
    </div>
    <div id="nestedGridParentItem" class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="4">
      <div class="grid-stack-item-content">

        <div id="nestedGrid" class="grid-stack">
          <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">1</div></div>
          <div class="grid-stack-item" data-gs-x="3" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">2</div></div>
          <div class="grid-stack-item" data-gs-x="6" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">3</div></div>
          <div class="grid-stack-item" data-gs-x="9" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">4</div></div>

          <div class="grid-stack-item"...

CSS

.grid-stack {
  background: lightgoldenrodyellow;
}

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

.grid-stack .grid-stack {
  /*margin: 0 -10px;*/
  background: rgba(255, 255, 255, 0.3);
}

.grid-stack .grid-stack .grid-stack-item-content {
  background: lightpink;
}

JavaScript

$(function () {
  $('.grid-stack').gridstack({});

  $('#grid').on('gsresizestop', function(event, elem) {
    // this shows it's being called 6 times with 'undefined' elem for nested 1-6 items, 
    // plus 1 for actual top item being resized!
    var newHeight = $(elem).attr('data-gs-height');
    console.log(newHeight);

    // force nested grid to fill in all the parent gridItem content height
    // just like it already does the width (% column based)
    //   height = rows * (cellHeight + verticalMargin) - verticalMargin (as last row doesn't have margin)
    // so 
    //  cellHeight = (height - (rows-1) * verticalMargin) / rows;
    elem = $(elem);
    if (elem && elem.is('#nestedGridParentItem')) {
      var gridEle = $('#nestedGrid');
      var grid = gridEle.data('gridstack');
      var height = gridEle.parent().innerHeight();
      var rows = grid.grid.getGridHeight();
      var verticalMargin = grid.verticalMargin();
      if (rows < 1) { rows = 1; }
      var oldCellHeight = grid.cellHeight();
      var cellHeight = (height - (rows-1) * verticalMargin) / rows;
      grid.batchUpdate();
      grid.cellHeight(cellHeight);
      grid.commit();
      // which has no immediate effect because of this in GridStack.prototype._updateStyles()
      // if (this._styles._max !== 0 && maxHeight <= this._styles._max) { return; } // Keep this._styles._max increasing
    }
  });
});