div:nth-child(1){
    grid-area: header;
}
div:nth-child(2){
    grid-area: main;
}
div:nth-child(3){
    grid-area: aside;
}
div:nth-child(4){
    grid-area: footer;
}
main{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    grid-template-areas: 
        "header header header header"
        "main main . aside"
        "footer footer footer footer";
    
}

.child{
    background-color: darkred;
    width: 100%;
    height: 200px;
}
/*h1{
    justify-self:start;
    padding: 0;
    margin: 0;
}
header{
    display: grid;
    grid-template-columns: 300px auto;
    grid-template-rows: 1fr 1fr;
    justify-content: space-between;
    align-content: space-around;
    align-items:end;
    
}

nav{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 25px;
}
main {
    display : grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-gap: 20px;
    justify-items: center;
    
}
.child{
    background-color: pink;
    height:100px;
    width:100%;
}

div:nth-child(7){
   background-color: firebrick;
    height:100px;
    width:100%; 
}
footer{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

@media (max-width: 500px) {
    header{
        display:grid;
        grid-template-columns:1fr;
        justify-items:center;
    }
    h1{
        justify-self:center;
    }
    nav{
        align-self:center;
        justify-items: center;
    }
}*/