.grid {
   display: grid; 

   grid-template-rows: 1fr 1fr 1fr 1fr;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
   
   gap: 0px;
   height: 100%;
   
}

#item-0 {

   background-color: #f83; 
   grid-row-start: 1;
   grid-column-start: 1;

   grid-row-end: 5;
   grid-column-end: 5;
   
}
#item-1 {

   background-color: #fa3; 
   grid-row-start: 3;
   grid-column-start: 5;

   grid-row-end: 5;
   grid-column-end: 7;
   
}
#item-2 {

   background-color: #fc3; 
   grid-row-start: 1;
   grid-column-start: 6;

   grid-row-end: 3;
   grid-column-end: 7;
   
}
#item-3 {

   background-color:#fff; 
   grid-row-start: 1;
   grid-column-start: 5;

   grid-row-end: 3;
   grid-column-end: 6;
   
}