alt Hacker NewsMasonry layout fixes one of the dimensions. That means either portrait or landscape images will look visibly smaller (less detailed, more ignorable, etc) than those of the inverse aspect ratio, because their longer side must be the same length as the latter’s shorter side. This has real UX consequences. What masonry works best with is images of different aspect ratios but the same orientation.
Replies
With Masonry and using the bin packing algorithm/layout, according to your visual requirements, you can (should?) use a system for sizes for the sizing element and get different widths for the underlying columns of the ‘grid’; ie: if the sizing element is a quarter of base width, you scale down some of the widest image to bring more homogeneity-or on the contrary balance it with some enlarged elements that brings some rythm.
Edit: doc has this first example https://masonry.desandro.com/layout that you could use but have to imagine images to be twice the size, similar to a Müller Brockmann grid
Pointing out that masonry isn't as good with mixed-orientation content as it is with uniform-orientation content is all well and good, but we still need a way to display mixed orientation content. What alternatives to masonry do you propose?
- If you stretch all images into a uniform aspect ratio, they get all squashed and look terrible.
- If you crop all images into a uniform aspect ratio, you lose potentially the majority of the content in some images.
- If you display all images at their natural aspect ratio and their full size, there will be huge swathes of empty space in between them because they don't pack tightly.
Masonry layouts allow you to preserve aspect ratio without wasting a massive portion of your user's screen space. It's not perfect, but it's the best layout mixed-orientation content that I know of.
If you know of a better method to handle mixed orientations, I'd love to hear it and would gladly rescind by remarks.