div.wrapper {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
  grid-auto-rows: 75px;
  grid-auto-flow: dense;/*This allow us to control automatic placement for the elements, by default
  grid-auto-flow is row so the browser will try to fill each row with the elements. The column instructions
  will organize the elements by filling each columns. And finally the dense instructions will try to fill
  each whole in our grid so we have an impression of disorder*/
}
div.wrapper > div > img {
  width: 100%;
  height: 100%;
  object-fit: cover;/*The object-fit instruction define how the content must be adapt to his parent*/
}
div.horizontal {
  grid-column: auto / span 2;/*The span instructions says take the number of columns indicate, for
  example here our horizontal div will 2 column width*/
}
div.vertical {
  grid-row: auto / span 2;
}
div.big {
  grid-column: auto / span 2;
  grid-row: auto / span 2;
}