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>