<div class="container">
    <div class="nav">nav</div>
    <div class="aside">aside</div>
    <div class="main">main</div>
    <div class="footer">footer</div>
</div>

.container {
    display: grid;
    height: 100%; 
    grid-template-rows: 1fr 3fr 1fr;
    grid-template-areas:
        "nav nav nav"
        "main  main aside"
        "footer  footer footer";
}
 .nav {
    grid-area: nav;
    background-color: #44B261;
}

.aside {
    grid-area: aside;
    background-color: #09B7BB;
}

.main {
    grid-area: main;
    background-color: #FF1A6F;
}

.footer {
    grid-area: footer;
    background-color: #4789D4;
}

.container >* {  
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 20px; 
}

.container .item:nth-child(odd) {
    background-color: rgba(0,0,0,0.3);
}


/* reset */
body, html {
    height: 100%;
    margin: 0;
    width: 100%;
    font-family: sans-serif;
}