Playground layouts in Split.js

JSFiddle layout JSBin layout CodePen layout

HTML

<script src="https://unpkg.com/split.js/split.min.js"></script>

<div id="layouts">
  <label><input name="editor_mode" type="radio" value="grid_1" checked> Classic</label>
  <label><input name="editor_mode" type="radio" value="grid_2"> Columns</label>
  <label><input name="editor_mode" type="radio" value="grid_3"> Bottom results</label>
</div>

<div id="editor"></div>

SCSS

#editor {
  height: calc(100vh - 40px);
  border: solid 1px red;

  .gutter {
    background-color: red;
    position: relative;
    
    &.gutter-horizontal {
      cursor: ew-resize;
      height: 100%;
      float: flot;
      
      &:after {
        content: "";
        display: block;
        background: rgba(255,0,0,0.2);
        height: 100%;
        width: 8px;
        position: absolute;
        left: -4px;
      }
    }
    
    &.gutter-vertical {
      cursor: ns-resize;
      
      &:after {
        content: "";
        display: block;
        background: rgba(255,0,0,0.2);
        height: 8px;
        width: 100%;
        position: absolute;
      }
    }
  }

  .split {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }

  .panel-v {
    float: left;
    height: 100%;
    overflow: auto;
  }

  .panel-h {
    overflow: auto;
  }
}

JavaScript

let currentInstance = null
let currentGrid     = "grid_1"

let getElements = (selector) => {
  var els = document.querySelectorAll(selector)
  return Array.from(els)
}

let getGridSize = () => {
	let gridSizes = []
	for (split of currentInstance){
  	gridSizes.push(split.getSizes())
  }

  return gridSizes
}

let setGridSize = () => {
	let name = currentGrid
	let sizes = JSON.parse(localStorage.getItem(name + "-split-sizes"))

	if (sizes){
    for (let index = 0; index < currentInstance.length; index++){
      currentInstance[index].setSizes(sizes[index])
    }
  }
}

let saveGridSize = () => {
  let name = currentGrid
	localStorage.setItem(name + "-split-sizes", JSON.stringify(getGridSize()))
}

var grid = {
  grid_1: {
  	structure: `
      <div class="panel-v left">
        <div class="panel-h"></div>
        <div class="panel-h"></div>
      </div>
      <div class="panel-v right">
        <div class="panel-h"></div>
        <div class="panel-h"></div>
      </div>
    `,
    init: function(){
      let panelsV = getElements("#editor .panel-v")
      let s1 = Split(panelsV, {
        minSize: 50,
        snapOffset: 10,
        gutterSize: 1,
        onDragEnd: saveGridSize
      })

      let panelsLeft = getElements("#editor .panel-v.left .panel-h")    
      let s2 = Split(panelsLeft, {
        direction: "vertical",
        minSize: 50,
        snapOffset: 10,
        gutterSize: 1,
        onDragEnd: saveGridSize
      })

      let panelsRight = getElements("#editor .panel-v.right .panel-h")
      let s3 = Split(panelsRight, {
        direction: "vertical",
        minSize: 50,
        snapOffset: 10,
        gutterSize: 1,
        onDragEnd: saveGridSize
      })
      
      return [s1, s2, s3]
    }
  },
	grid_2: {
  	structure: `
      <div class="panel-v"></div>
      <div class="panel-v"></div>
      <div class="panel-v"></div>
      <div class="panel-v"></div>
    `,
    init: function(){
      let panelsV = getElements("#editor .panel-v")
     ...