Split.js | Splitting HTML View Layout with JavaScript

Split.js is a lightweight vanilla JavaScript library, it can split a html view layout and create resizable splited views that support CSS float, flexbox, and Grid layouts.

How to create splited layout view using Split.js?

1.Import split.js file in html page

<script src="./split.min.js"></script>

2.Create a view that will be splited

<div>
  <div class="split" id="one"></div>
  <div class="split" id="two"></div>
  <div class="split" id="three"></div>
</div>

3.Initialize the Spilt.js using html dom element id, such as #one, #two, #three

Split(['#one', '#two', '#three']);

4.Style the split view using css

.split, .gutter.gutter-horizontal {
  float: left;
}
.gutter.gutter-horizontal {
  cursor: ew-resize;
}