Seeking help regarding tricky image gallery layout

Hello everyone. I'm working on a project where a designer gave me a very specific image gallery for which I don't find any suitable CSS solutions. I thought about many ways of solving it but I don't find a respectable solution. So my hope is this nice community, for which I reach out with the mentioned problem. The image gallery is a two column somehow masonry design, which always has the 2/3 proportions. It will contain images with different proportions and will sometimes also have quotes embedded (which will take up more space then the image in this column.). I have also attached an image showing three possible layout outcomes. I came along the following issues: - Since it has uneven columns, I can't use the column property (which seems to have equal widths on all columns at all time). - I've tried something with grid but I kinda get lost with a solid indent solution for images which follow. - I could somehow hardcode different layouts but its unclear how many images the user will upload. As you see, I'm pretty lost and I'm wondering, if someone could point me into the right direction. Would be great to get some ideas from you, if there are some css only solutions. If possible I would like to go without any layouting javascript library. Any help is greatly appreciated.
3 Replies
Unknown User
Unknown User3y ago
Message Not Public
Sign In & Join Server To View
ramtam92
ramtam92OP3y ago
The designers didn't had any technique in mind at all, they are mainly print designers without too much knowledge in webdev. May I ask where you hade seen similar implementation?
Unknown User
Unknown User3y ago
Message Not Public
Sign In & Join Server To View
Want results from more Discord servers?
Add your server