html, body {
    margin:0;
    padding:0;
}
#grid-container {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: 100px 1fr 100px;
    grid-template-areas:
        "header header header"
        "nav content aside"
        "footer footer footer";
}

#grid-container > div {
    padding: 20px;
    color: white;
    font-size: 1.2em;
}

#header { 
    grid-area: header; 
    background: linear-gradient(to bottom right, blue, red);
    text-align: center;
}
#nav { 
    grid-area: nav; 
    background-color: rgb(22, 235, 242);
}
#content { 
    grid-area: content; 
    background-color: rgb(141, 181, 205);
}
#aside { 
    grid-area: aside; 
    background-color: rgb(101, 153, 154);
}
#footer { 
    grid-area: footer; 
    background: linear-gradient(to bottom right, blue, rgb(70, 55, 148));
    text-align: center;
}