A travel album lets friends browse landscape and portrait photographs with memories. Uniform rows either leave large gaps or crop the harbor’s tall composition. Preserving each image matters more than aligning matching metadata fields.
How: work toward a solution
Keep each photograph’s natural ratio and place its card in the shortest column. Open a memory: later cards move without overlap. DOM and keyboard order remain unchanged. Narrow screens use one column; reset closes the memories.
Browse uncropped travel photographs and expand memoriesTRAVEL JOURNAL
Places we paused
Wide shores, tall harbors, room for each memory.
01
Morning shore
Read memory
Low waves arrive beside the dune path. The broad horizon stays visible without cropping.
02
Harbor at dusk
Read memory
The portrait frame follows the boats from the foreground to the last light on the water.
03
A lake detour
Read memory
Pines frame the path. We paused here before continuing home, keeping the entire shoreline in the frame.
04
One last look
Read memory
The same beach photograph appears again with a longer memory. Different caption lengths also affect card height; opening this note must move later cards without overlap.
A fictional demo within this article. Reset or reload restores its initial state.
What: the concept
Masonry packs items of different heights without requiring shared rows. It suits visual browsing, not necessarily strict sequential comparison. Recalculate after images, fonts or disclosures change size.
Choose varied-height packing for image-led browsing. Use a uniform grid when matching attributes across rows matters more, or a list when a strict reading sequence dominates. Visual and focus order need explicit review in masonry.
02Applications
The album mixes landscape and portrait assets with different caption lengths. A portfolio can use the same relationship. This example repeats one photograph with another memory to show that text height matters too.
03Implementation & cautions
Keep source order, measure actual card height, and observe image, font and disclosure changes. The no-JavaScript fallback is an ordinary grid. Test every pair for overlap after expansion and verify that Tab follows the unchanged DOM sequence.
Already talking with external AI? Share this article link and explain why the choice fits your project and which tradeoff matters. Ask how it applies to your agreed requirements.
Discuss this idea
Comments are shared across languages. GitHub login required to post.