<div class="grid">
  <img src="https://picsum.photos/id/237/400/200">
  <img src="https://picsum.photos/id/237/400/200">
  <img src="https://picsum.photos/id/237/400/200">
  <img src="https://picsum.photos/id/237/400/200">
</div>

<div class="grid horizontal">
  <img src="https://picsum.photos/id/1074/400/200">
  <img src="https://picsum.photos/id/1074/400/200">
  <img src="https://picsum.photos/id/1074/400/200">
  <img src="https://picsum.photos/id/1074/400/200">
</div>

.grid {
  display: grid;
  grid-auto-flow: row; /* it's the default value (can be omitted) */
  grid-gap: 10px;
  max-width: 600px;
  margin: 20px auto;
}
.horizontal {
  grid-auto-flow: column;
}
.grid img:first-child {
  grid-area: span 3 / span 3;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}