This is a combination of css and repeating regions

Scenario: A photographer client, has a zillion photos to display for sale. I created a database to put them in different categories. So far so good. I can get a page to display all the photos in a category. So far, so good.

But her photos are all different sizes, shapes. So I added a field to the database for vertical and horizontal. Then for testing, I changed the db entry for some to a v for vertical. I stumbled about and figured out query to put a set of horizontal on the top of the page and the verticals on the bottom. Still ok.

I opened all of the photos, and ran a PS action to make max height at 600 px.

I added a minheight css to div to 600 pixels hoping that would keep the display ok. Nope, not enough.

I tried some flex display but I didn't get it done, but then I'm not there yet with flex stuff.

So using repeat region, how can I get the photo displays not have HUGE white gaps, or without the minheight, huge spaces when all images are not consistent? It is probably something simple, but after 3 days with this, I'm out of ideas. I haven't changed all the images from h to v in the database yet, but this page should show what I am trying to do (not live yet, work in progress):

https://cj-photos-tunkhannock.com/photos-animals.php

Any ideas, so much appreciated.