DzinerHub

DzinerHub

Masonry Layout

A grid pattern with columns of equal width but variable item heights.

Masonry Layout

A grid pattern with columns of equal width but variable item heights.

In Web & Mobile Design

What is a Masonry Layout?

A masonry layout arranges items in columns of equal width with variable heights, minimizing gaps.

When to use Masonry?

- Galleries, cards, and content feeds with varied item heights.

When not to use Masonry?

- When strict reading order and alignment are required.

What is the anatomy of Masonry?

- Columns and gutters

- Reflow and responsive breakpoints

- Lazy loading and re‑measurement