Challenging Image Gallery (Same Height)

[fleckensteinvalentin (Valentin Fleckenstein)]

Challenging Image Gallery / Grid Layout (Same Height / Horizontal Masonry)

Hello!
Maybe someone can help me with my problem. I am trying to build a same-height grid layout. Something like a horizontal masonry grid.

Here is an example:

I have already tried it with Flexbox but I couldn’t achieve the desired result. The whole gallery should of course stay inside the container and not protrude.
The goal would be to have variable columns and fixed rows, so that pictures in a row with different aspect ratios always have the same height.

“Contain” is not an option, as the images are cropped here.

In principle, it is also the same grid that Google uses for Google Images:

I would be grateful for any help!

[Axel_Dicanot]

Hello !

I have the same problem. A client would like to have this effect for her portfolio. I didn’t manage to find a way to achieve it for now. I guess it needs a little bit of custom code but I didn’t find the way to do it.

Did you find a solution to this problem since you posted this question ?

If anyone have the answer to this question, I would be grateful too.

[webdev (Jeff Selser)]

The use of https://masonry.desandro.com/ is a pretty common way to solve this problem.

[kurt]

Hello, I am also looking for this solution. Like here: http://hallieburton.com