Equal heights different width layout for dynamic image gallery - php

Question

am working on a codeigniter website and currently trying to achieve a layout like this where i have equal heights for all images in row but different widths.
My images are stored in a MYSQL database with url paths pointing to the directory where they are located. I have also stored their heights and widths (the height and widths are stored in pixels).
Here is the sql for fetching the contents in PhotoController
$data['data'] = $this->model
->select('photo_path, photo_height, photo_width')
->get()
->getResultArray();
Then in Home view, here is what i have so far. (using bootstrap 4 for styling)
<div class="container">
<div class="row">
<?php foreach ($data as $row) : ?>
<div class="col-md-4 col-lg-6">
<img src="<?= base_url($row['photo_path']); ?>" class="img-lazy img-fluid">
</div>
<?php endforeach; ?>
</div>
</div>
Am stuck on what to do next here.

Answer 1

html
<div class="masonry-with-columns-2">
<?foreach ($data as $row){?>
<div>
img here
</div>
<?}?>
</div>
scss
// Within style tags in your html file
body {
margin: 0;
padding: 1rem;
}
// SCSS
// Masonry layout horizontal
.masonry-with-columns-2 {
display: flex;
flex-wrap: wrap;
div {
height: 150px;
line-height: 150px;
background: #9B1B30;
color: white;
margin: 0 1rem 1rem 0;
text-align: center;
font-weight: 900;
font-size: 2rem;
flex: 1 0 auto;
}
#for $i from 1 through 36 {
div:nth-child(#{$i}) {
$h: (random(400) + 70) + px;
width: $h;
}
}
}
Source https://mdbootstrap.com/docs/angular/layout/masonry/