Even seemingly simple components like image galleries can present unexpected challenges when it comes to layout. On the rifasvelez-web project, our winners gallery, designed to display a dynamic array of varying-sized images, encountered just such a hurdle. The goal was a clean, organized masonry grid—think Pinterest-style—where items slot together perfectly. What we got, however, was a less-than-perfect jumble.

The Unruly Gallery

Our initial masonry implementation, intended to create a

Project Context: Rifasvelez-web

The rifasvelez-web project is a dynamic web application built with Astro, designed to showcase information, including a critical "winners gallery". This gallery prominently displays past winners of raffles, making a visually appealing and correctly structured layout paramount for user engagement and credibility.

The Problem: Inconsistent Masonry Gallery

Our "winners gallery" was designed to use a masonry layout, a popular grid technique where items of