style.css

.container{
    display: grid;
    height: 100vh;
    grid-template-columns: 1fr  1fr 1fr 1fr;
    grid-template-rows: 0.2fr 1.5fr 1.2fr 0.8fr;
    grid-template-areas:
        "nav nav nav nav"
        "sidebar main main main"
        "sidebar content1 content2 content3"
        " sidebar footer footer footer"    
    ;
    grid-gap:5px;
}
nav{
    background-color: #477eaf;
    grid-area: nav;
}
main{
    background-color: #eb8b0d;
    grid-area: main;
}
#sidebar{
    background-color: #39c71a;
    grid-area: sidebar;
}
#content1{
    background-color: #e09626;
    grid-area: content1;
}
#content2{
    background-color: #1da3cc;
    grid-area: content2;
}
#content3{
    background-color: #7648b3;
    grid-area: content3;
}
footer{
    background-color: #cc1d6f;
    grid-area: footer;
}
@media(max-width:576px){
    .container{
        grid-template-columns: 1fr;
        grid-template-rows: 0.2fr 0.2fr 1.5fr 1.2fr 1.2fr 1.2fr 0.8fr;
        grid-template-areas: 
           "nav"
           "sidebar"
           "main"
           "content1"
           "content2"
           "content3"
           "footer";
    }
    #sidebar{
        background-color: red;
        border-radius: 30px;
    }
}