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

Question

[denism300]

Есть несколько картинок, которые надо разместить в 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%;
}

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


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

Answer 1

[Ankhena]

Для колонок есть специальное css свойство columns https://webref.ru/css/columns

Чтобы так получилось на флексах, нужно, во-первых, задавать флекс родителю тех элементов, которые нужно выстроить, а во-вторых, придется задавать высоту (хотя бы максимальную).