#container {
    display: grid;
    grid-template-areas:
    "header header header"
    "content1 content2 content3"
    "content4 content5 content3"
    "content6 content6 content7"
    "footer footer footer";
    grid-auto-rows: 120px;
    gap:8px;
}
.header {
    display: flex;
flex-direction: row;
flex-flow: reverse;
align-items: center;
    grid-area:header;
    background-color:rgb(252, 230, 40)
}
.nav {
    margin-left: 60%;
    width:40%;
    display:flex;
    justify-content: space-between;
    background-color: chartreuse;
    padding: 10px;
    margin-top:5px;
}

.content1 {
        display: flex;
    justify-content: center;
    align-items: center;
    grid-area:content1;
    background-color:rgb(139, 126, 255)
}
.content2 {
        display: flex;
    justify-content: center;
    align-items: center;
    grid-area:content2;
    background-color:rgb(38, 193, 255)
}
.content3{
        display: flex;
    justify-content: center;
    align-items: center;
    grid-area:content3;
    background-color:fuchsia
}
.content4{
        display: flex;
    justify-content: center;
    align-items: center;
    grid-area:content4;
    background-color:hotpink
}
.content5{
        display: flex;
    justify-content: center;
    align-items: center;
    grid-area:content5;
    background-color:rgb(230, 236, 248)
}

.content6{
        display: flex;
    justify-content: center;
    align-items: center;
    grid-area:content6;
    background-color:rgb(21, 255, 224)
}
.content7{
        display: flex;
    justify-content: center;
    align-items: center;
    grid-area:content7;
    background-color:rgb(253, 49, 93)
}
.footer{
        display: flex;
    justify-content: center;
    align-items: center;
    grid-area:content1;
    background-color:rgb(255, 94, 94)
}

@media screen and (max-width:600px){
    #container{
        grid-template-areas:
        "header"
        "content1"
        "content2"
        "content3"
        "content4"
        "content5"
        "content6"
        "content7"
        "footer"

    }
}