.container {    
    display: grid;
    grid-template-columns: 193px 193px 193px 193px;
    grid-template-rows: 135px 135px 135px 135px; 
    column-gap: 10px;
    row-gap: 15px;
    grid-template-areas: 
    "header1 header2 header2 header3"
    "main main main main"
    "footer1 footer1 footer1 footer2"
    "footer3 footer4 footer4 footer4";
}

.container-1 {	
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto; 
}
.container-2 {	
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto; 
}
.container-3 {	
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto; 
}
.container-4 {	
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto auto auto; 
}
.container-5 {	
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto; 
}
.container-6 {	
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto; 
}
.container-7 {	
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto; 
}
.container-8 {	
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto; 
}

.item-1 {
    grid-area: header1;
    /* border: 2px solid black; */
}
.item-2 {
    grid-area: header2;
    /* border: 2px solid black; */
}
.item-3 {
    grid-area: header3;
    /* border: 2px solid black; */
}
.item-4 {
    grid-area: main;
    /* border: 2px solid red; */
}
.item-5 {
    grid-area: footer1;
    /* border: 2px solid green; */
}
.item-6 {
    grid-area: footer2;
    /* border: 2px solid green; */
}
.item-7 {
    grid-area: footer3;
    /* border: 2px solid green; */
}
.item-8 {
    grid-area: footer4;
    /*box-shadow: 10px 5px 5px gainsboro;*/
    /* border: 2px solid green; */
}