test/grid.html

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Grid Example</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="../out/vs/loader.js"></script>
	<script>
		require.config({ baseUrl: '../out' });

		require(['vs/base/browser/ui/splitview/grid'], ({ Grid }) => {
			const grid = new Grid(document.body);
			const layout = () => grid.layout(document.body.clientWidth, document.body.clientHeight);
			window.onresize = layout;
			layout();
		});
	</script>
	<style>
		html,
		body {
			width: 100%;
			height: 100%;
			padding: 0;
			margin: 0;
		}

		.node {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.action {
			display: inline-block;
			width: 16px;
			height: 16px;
			border: 1px solid #3c3c3c;
			text-align: center;
			line-height: 16px;
			border-radius: 3px;
		}

		.action:hover {
			cursor: pointer;
			background-color: #ffffff54;
		}
	</style>
</head>

<body>

</body>

</html>