How the Masonry Grid Works

Thu, 10 Apr 2025 00:00:00 +0000

The homepage and section list pages use a masonry grid — a layout where items of varying heights pack together without gaps, like a stone wall.

The Hybrid Approach

Pure CSS Grid gives us responsive columns but leaves vertical gaps. Pure JavaScript positioning is fragile on resize. The First Folio theme uses both:

CSS Grid handles the horizontal layout — responsive columns that reflow based on viewport width.
JavaScript runs after images load and adjusts vertical positioning to fill gaps.

This means the layout works (albeit with gaps) even when JavaScript is disabled.

Masonry on first-folio.demo.lobb.ie

How the Masonry Grid Works

The Hybrid Approach