#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;
}
.content1{
        display:flex;
    flex-direction: row;
    flex-flow:reverse;
    grid-area: content1;
    background-color: lightgreen;
}
.content2{
        display:flex;
    flex-direction: row;
    flex-flow:reverse;
    grid-area: content2;
    background-color: grey;
}
.content3{
        display:flex;
    flex-direction: row;
    flex-flow:reverse;
    display:flex;
    justify-content: center;
    align-items: center;
    grid-area: content3;
    background-color: brown;
}
.content4{
        display:flex;
    flex-direction: row;
    flex-flow:reverse;
    grid-area: content4;
    background-color: lightblue;
}
.content5{
        display:flex;
    flex-direction: row;
    flex-flow:reverse;
    grid-area: content5;
    background-color: blue;
}
.content6{
        display:flex;
    flex-direction: row;
    flex-flow:reverse;
    grid-area: content6;
    background-color: blanchedalmond;
}
.content7{
        display:flex;
    flex-direction: row;
    flex-flow:reverse;
    grid-area: content7;
    background-color: magenta;
}
.footer{
        display:flex;
    flex-direction: row;
    flex-flow:reverse;
    grid-area: footer;
    background-color:gainsboro
}
.header{
    display:flex;
    flex-direction: row;
    flex-flow:reverse;
    align-items:center;
    grid-area: header;
    background-color: #f8b400
}
.nav{
    margin-left: 60%;
    width:40%;
    display: flex;
    justify-content: space-between;
    background-color: lightyellow;
    padding: 10px;
    margin-top: 5px;
}