*{
    margin: 0;
    padding:0;
    box-sizing:border-box;
    font-size:30px;
}

.grid-container{
    height:100vh;
    border: 10px solid green;
    display:grid;

    /* grid-template-areas: 
    "header header header"
    "nav main ads"
    "footer footer footer";
    grid-template-rows: 60px 1fr 60px;
    grid-template-columns: 20% 1fr 15%; */

    grid-template: 
    "header header header" 60px
    "nav main ads" 1fr
    "footer footer footer" 60px
    / 20% 1fr 15% ;

}
.grid-item{
    background-color:rgb(204, 204, 207);
    border: 4px solid orangered;
    padding: 20px;
}

.grid-item1{
    grid-area: header;
}
.grid-item2{
    grid-area: nav;
}
.grid-item3{
    grid-area: main;
}
.grid-item4{
    grid-area: ads;
}
.grid-item5{
    grid-area: footer;
}