split-grid.js example

by Oski Krawczyk

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<script src="https://unpkg.com/[email protected]/dist/split-grid.js"></script>
<div class="grid">
  <div>
    HTML
  </div>
  <div>
    CSS
  </div>
  <div>
    JS
  </div>
  <div>
    Result
  </div>
  <div class="horizontal-gutter">
  </div>
  <div class="vertical-gutter">
  </div>
</div>

CSS

html, body, .grid {
  height: 100%;
  padding: 0;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 10px 1fr;
  grid-template-rows: 1fr 10px 1fr;
}

.vertical-gutter {
  grid-area: 1 / 2 / 4 / 2;
  background: rgba(0,0,0,0.2);
}

.horizontal-gutter {
  grid-area: 2 / 1 / 3 / 4;
  background: rgba(0,0,0,0.4);
}

JavaScript

Split({
	columnGutters: [{
    track: 1,
    element: document.querySelector('.vertical-gutter'),
  }],
  rowGutters: [{
  	track: 1,
    element: document.querySelector('.horizontal-gutter'),
  }]
})