JSFiddle - React, Tailwind, and code Playground

HTML

<header class="header">header</header>
        <nav class="side__nav">side__nav</nav>
        <content class="content">content</content>
        <footer class="footer">footer</footer>

SCSS

* {
    margin:0;
    padding:0;
}

*, *::before, *::after {
    box-sizing: border-box;
}
$grid-gap: 10px;
$header-height: 70px;
$footer-height: 70px;
$main-divs: 3;
body {
    display: grid;
    margin: 0px;
    grid-gap: 10px;
    height:100vh;
    grid-template-columns: [side__nav] 250px [main] 1fr;
    grid-template-rows: [header] 70px auto [footer] 70px;
}
.header {
    grid-column: main;
    grid-row: 1;
    background: pink;
}
.side__nav {
    grid-column: side__nav;
    grid-row: 1 / span 3;
    background: red;
}
.content {
    grid-column: main;
    grid-row: 2;
    background: green;
}
.footer {
    grid-column: main;
    grid-row: 3;
    background: purple;
    opacity:.5;
}
    /*& .wrapper {
        display: grid;
        margin: 10px;
        grid-gap: 10px;
        grid-template-columns: repeat(4, [col] 1fr ) ;
        grid-template-rows: repeat(2, [row] auto  );
        background-color: #fff;
        color: #444;

        &__box {
            background-color: #444;
            color: #fff;
            border-radius: 5px;
            padding: 20px;
            font-size: 150%;

            &__sub {
                background-color: #ccc;
                color: #444;
            }
        }
    }*/









    .a {
        grid-column: col / span 2;
        grid-row: row;
    }

    .b {
        grid-column: col 3 / span 2;
        grid-row: row;
    }

    .c {
        grid-column: col / span 2;
        grid-row: row 2;
    }

    .d{
        grid-column: col 3 / span 2;
        grid-row: row 2;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: 1fr 1fr;
    }

    .e {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .f {
        grid-column: 1;
        grid-row: 2;
    }

    .g {
        grid-column: 2;
        grid-row: 2;
    }