This is a combination of css and repeating regions

Solution:

.masonry {
display: flex;
flex-flow: row wrap;
width: 33%;
}

.masonry-item {
overflow: hidden;
margin: 10px;
background-color: #fff;
flex: auto;
}

applied to repeat region:

<?php
$wa_startindex = 0;
while(!$photos->atEnd()) {
$wa_startindex = $photos->Index;
?>
<div class="masonry">
<div class="masonry-item ">
<img src="webphotos/<?php echo($photos->getColumnVal("photo_name")); ?>" alt=""/>

<p><?php echo($photos->getColumnVal("photo_SKU")); ?></p>
<p><?php echo($photos->getColumnVal("photo_details")); ?></p>
</div></div>
<?php
$photos->moveNext();
}
$photos->moveFirst(); //return RS to first record
unset($wa_startindex);
unset($wa_repeatcount);
?>