My layout structure is as follows:
<div class="row">
<div class="columns small-12 large-6 medium-12 panel-wrapper">
Box no 1
</div>
<div class="columns small-12 large-6 medium-12 panel-wrapper">
Box no 2
</div>
<div class="columns small-12 large-6 medium-12 panel-wrapper">
Box no 3
</div>
<div class="columns small-12 large-6 medium-12 panel-wrapper">
Box no 4
</div>
</div>
The row takes 2 columns, and there are 4 variable-height boxes. The challenge here is to position the third column below the first one, and the fourth column below the second one without creating large gaps between them. Masonry-style layouts haven't been successful for me in achieving this effect. They stack all columns on top of each other with absolute positioning, leading to unwanted results.
Everything works smoothly when the box heights are the same. However, when the first box is taller than the second one, the third box goes below the second one, and the fourth instance ends up below the first box but with a significant height difference compared to the third box.