how to sort image in html into a 2x2 grid

<style>
.container {
  display: flex;
  flex-wrap: wrap;
}

.container .image {
  width: 50%;
}

.container img {
  width: calc(100% - (20px * 2));
  margin: 20px;
}
</style>
<div class="container">
  <div class="image">
    <img src="http://placehold.it/50" />
  </div>
  <div class="image">
    <img src="http://placehold.it/50" />
  </div>
  <div class="image">
    <img src="http://placehold.it/50" />
  </div>
  <div class="image">
    <img src="http://placehold.it/50" />
  </div>
</div>