* {
   padding: 0;
   margin: 0;
}
.gallery{
  padding: 10px;
  max-width: 1100px;
  margin: auto;
  background: #212228;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit,minmax(250px, 1fr));
  grid-auto-rows: 250px;
  grid-auto-flow: dense;
}

/**** stretch vertically *****/
.v-stretch{
   grid-row: span 2;
}

/**** stretch horizontally *****/
.h-stretch{
   grid-column: span 2;
}

/**** stretch vertically and horizontally *****/
.big-stretch{
   grid-row: span 2;
   grid-column: span 2;
}

.gallery{
   width: 100%;
   height: 100%;
   object-fit: cover;
} 

/**** responsive *****/
@media(max-width: 560px)
{
   .v-stretch{
      grid-row: span 1;
   }
   .h-stretch{
      grid-column: span 1;
   }
   .big-stretch{
      grid-column: span 1;
      grid-row: span 1;
   }
}