body{
    text-align: center;
    display: grid;
    grid-template-columns: 20% 80%;
    grid-template-rows: 10% 80% 10%;
    grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer"    
    ;
    gap: 20px;
}
.grid{
    display: grid;
    grid-template-columns: repeat(4,minmax(5rem,25rem));
}
.item{
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 2;
    background-color: aqua;
    border-radius: 10px;
    margin: 10px;
}
header{
    grid-area: header;
    background-color: orange;
    display: flex;
}
header li{
    display: inline-block;
}
aside{
    grid-area: sidebar;
    background-color: aquamarine;
}
main{
    grid-area: main;
    background-color: blueviolet;
}
footer{
    grid-area: footer;
    background-color: brown;
}