<div class="image-container">
  <img src="https://dummyimage.com/1600" />
  <img src="https://dummyimage.com/1600" />
  <img src="https://dummyimage.com/1600" />
  <img src="https://dummyimage.com/1600" />
</div>

img {
  width: 100%;
}

@media (min-width: 376px) {
  .image-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    grid-gap: 1em;
  }
}

@media (min-width: 769px) {
  .image-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 0.2em;
  }
}