JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<script src="https://unpkg.com/split-grid/dist/split-grid.js"></script>
<div class="grid">
    <header>HEADA</header>
    <div class="gutter-col gutter-col-1"></div>
    <div class="links"></div>
    <div class="gutter-row gutter-row-1"></div>
    <div class="rechts"></div>
</div>

CSS

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

.grid div:not(.gutter-col):not(.gutter-row) {
    background-color: #ffc;
}
header { grid-row: 1; grid-column: 1/-1; }

.gutter-col {
    grid-row: 3/-1;
    cursor: col-resize;
    background-color: red;
}
.gutter-row {
    grid-column: 1/-1;
    cursor: row-resize;
    background-color: blue;
}
.gutter-col-1 {
    grid-column: 2;
}
.gutter-row-1 {
    grid-row: 2;
}

JavaScript

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