D7460N Fiddle

active-css.js, split-grid.js

by D7460N

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>
<page-container>
  <page-header>header</page-header>
  <page-nav>nav</page-nav>
  <page-main>main</page-main>
  <page-splitter></page-splitter>
  <page-aside>aside</page-aside>
  <page-footer>footer</page-footer>
</page-container>

CSS

@import url('https://fonts.googleapis.com/css2?family=Geo&family=Oxanium:wght@200&display=swap');

*:before, *:after, *, ::after, ::before {
  box-sizing: border-box;
}

body {
	padding: 0;
	margin: 0;
	background: linear-gradient(#182c38, #101925);
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.7);
	font-family: Oxanium;
	overflow: hidden;
}
page-container {
	gap: 1rem;
	padding: 1rem;
	height: 100vh;
	display: grid;
	overflow: hidden;
	grid-template-rows: auto 1fr auto;
	grid-template-columns: 200px 1fr 10px 1fr;
	grid-template-areas:
    "header header header   header"
    "nav    main	 splitter aside"
    "footer footer footer   footer";
}

page-header		{ grid-area: header; border: solid 1px grey; }
page-nav    	{ grid-area: nav; border: solid 1px green; }
page-main   	{ grid-area: main; border: solid 1px green; }
page-splitter { grid-area: splitter; border: solid 1px red; }
page-aside  	{ grid-area: aside; border: solid 1px green; }
page-footer 	{ grid-area: footer; border: solid 1px grey; }

page-header, 
page-footer {
	grid-template-rows: 1fr;
	grid-template-columns: auto 1fr auto;
	padding: 1rem;
}
page-splitter:hover {
 cursor: col-resize;
}

JavaScript

console.clear();

Split({
	columnGutters: [{
    track: 2,
    element: document.querySelector('page-splitter'),
  }]
})