Как разместить изображения в 2 колонки?

Есть несколько картинок, которые надо разместить в 2 колонки. Картинки вставляются в цикле на php, в итоге получается конструкция

<div class="wr">
    <div class="img"><img src="img.jpg" /></div>
    <div class="img"><img src="img.jpg" /></div>
    <div class="img"><img src="img.jpg" /></div>
    <div class="img"><img src="img.jpg" /></div>
</div>

чтобы расположить в 2 столбца, я задал стили для .img

.img {
    display: flex;
    flex-direction: column;
    width: 50%;
}

при этом получилось как-то так:


а как сделать, чтобы было как-то так: