Scattered Grid Help
Hello! I would really appreciated it if I could get some insight/guidance regarding the easiest way to do a “scattered grid” / “asymmetrical collage layout.”
I will attach two pictures. The first one is a full masonry layout that is symmetrical in the way that the spacing is even, not random. Easy to work with. The second one is my target, where images not only have slightly different sizes, but "random" placement.
2 Replies
If this truly is random I can't see how you could do this with grid in any "sensible" way as it would need so many columns and rows just define the positioning.
How do you expect this to work on smaller viewports?
That said, if I were doing this I would probably use a 2 column grid for smaller viewports (and no random positioning), extending this to 4 columns for larger viewports. Then, on larger screens apply some "random" positioning (using translate) to offset the items accordingly. To be be more random you could use JS for this positioning, ensuring that they don't overlap (unless this is not an issue).
I dealt with a similar problem when building a website for an artist. I had initially made a grid with every preview image being the same size. She said it was too mathematical and wanted random sized spaces between the images. I chose some random placements, but they were the exact same random placements every time the site was loaded. There wasn't any JS generating new random numbers. She accepted that solution.