#container {
    display: grid;
    grid-template-areas: 'header header'
        'header header'
        'nav nav'
        'col1 col3'
        'col1 col3'
        'col1 col3'
        'col2 col2'
        'col2 col2'
        'col2 col2'
        'footer footer'
        'footer footer';
}

@media screen and (min-width: 600px) {
    #container {
        display: grid;
        grid-template-areas: 'header header header header'
        'header header header header'
        'nav nav nav nav'
        'col1 col2 col2 col3'
        'col1 col2 col2 col3'
        'col1 col2 col2 col3'
        'footer footer footer footer'
        'footer footer footer footer';
    }
}

#header {
    grid-area: header;
    background-color: aqua;
    text-align: center;
}

#nav {
    grid-area: nav;
    background-color: green;
    display: flex;
}

#nav > a {
    text-decoration: none;
    color: white;
    border-right: 1px solid black;
    padding: 10px;
}

#col1 {
    grid-area: col1;
    background-color: azure;
}

#col2 {
    grid-area: col2;
    background-color: beige;
}

#col3 {
    grid-area: col3;
    background-color: bisque;
}

#footer {
    grid-area: footer;
    background-color: green;
    color: white;
    text-align: center;
}

#header, #footer {
    padding: 15px 5px;
}

#col1, #col2, #col3 {
    padding-bottom: 100px;
    padding-left: 10px;
    padding-top: 10px;
}