<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" style="--n:4">
  <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">
  <img src="https://picsum.photos/id/237/400/200">
</div>
<br>
<div class="grid horizontal" style="--n:2">
  <img src="https://picsum.photos/id/1074/400/300">
  <img src="https://picsum.photos/id/1074/400/300">
  <img src="https://picsum.photos/id/1074/400/300">
</div>
<div class="grid horizontal" style="--n:5">
  <img src="https://picsum.photos/id/1074/400/300">
  <img src="https://picsum.photos/id/1074/400/300">
  <img src="https://picsum.photos/id/1074/400/300">
  <img src="https://picsum.photos/id/1074/400/300">
  <img src="https://picsum.photos/id/1074/400/300">
  <img src="https://picsum.photos/id/1074/400/300">
</div>

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