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.
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.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
