Canva like image placement using CSS/JavaScript (next level to masonry layout)

Question

Why this question?

I have been doing research for ~2 months for this but couldn't find anything relevant so finally asking a question here.

Problem Statement

I'm looking to place a set of images with different sizes in a fixed-width container just like Canva does-

This is for sure not a masonry layout because here, Canva is bifurcating images into different rows based on some (?) calculation. What I was able to achieve is this-

This I achieved using https://masonry.desandro.com/ JS library, but it has its own limitations.

My Research

Based on my ~2 months of research, what Google has been telling me is that it's a masonry layout or it's 2D Bin Packing problem but I feel, it's not.

Canva is doing probably something very simple & intuitive (like explained here https://stackoverflow.com/a/14551767/2405040).

Libraries I found and tried

Links & blog posts

Final Question

Is that something very unique, or is it some calculation? How can I achieve this Canva like layout programmatically?

I'm not trying to optimise anything. I'm trying to achieve a layout like Canva does. — Shashank Agrawal, Jan 03 '23 at 05:08
Sorry, I wasn’t clear enough. What constraints is the canva layout obeying? I see it is laying out in rows, and filling each row exactly. Is it taking images in the order it has been given them and somehow deciding on the ‘best’ number to put in the row and the row height, perhaps to minimise the amount of each image it has to cut? And/or is there a constraint on the min and max height any row can be? etc… — A Haworth, Jan 03 '23 at 05:49
Yes, you are right @AHaworth. My best take here is that Canva is deciding on the best number of images to put (majorly of the ~same aspect ratio) and then adjusting the height of the row so that the items in that row can take up the entire width. — Shashank Agrawal, Jan 05 '23 at 08:18
Canva isn’t majoring on aspect ratio, or at least not exclusively, see the last row. I think the important thing is for you to specify what constraints you want. For example trying to minimise in some way the amount of each image that has to be cropped. — A Haworth, Jan 05 '23 at 08:51
My constraint is that I can place 2-4 images in every row, which should not leave empty space. — Shashank Agrawal, Jan 09 '23 at 08:58
But you will have to have some of them at least cropped if it's a truly mixed set of images - are there no constraints on which can be cropped or trying to optimise something - like minimise the area cropped or...? Otherwise you simply put 4 in a row and use size of cover on each one. — A Haworth, Jan 09 '23 at 17:20
Yeah, I don't want to apply cropping because that defeats the purpose. I inspected Canva's response and their images. They aren't cropping any images as such and yet able to fill the entire row with the images maintaining their aspect ratio. — Shashank Agrawal, Jan 10 '23 at 06:51