#container {
    grid-template-areas: 
        ". header header header ." 
        ". nav nav nav ." 
        ". main main main ." 
        ". footer footer footer .";
}

@media only screen and (min-width: 600px) {
    #container {
        grid-template-areas: 
            ". title title title title ." 
            ". header header header header ." 
            ". nav nav nav nav ." 
            ". main main main main ." 
            ". footer footer footer footer .";
    }
}