Masonry layout

Also called masonry grid, Pinterest layout, or waterfall layout

A layout of columns where items of different heights stack tightly with no row lines, like stones in a wall or a Pinterest board.

import { useSyncExternalStore } from 'react';

type Photo = {
  id: string;
  url: string;
  alt: string;
  width: number;
  height: number;
};

function useColumnCount() {
  return useSyncExternalStore(
    (onChange) => {
      window.addEventListener('resize', onChange);
      return () => window.removeEventListener('resize', onChange);
    },
    () => (innerWidth >= 1024 ? 4 : innerWidth >= 768 ? 3 : 2)
  );
}

// Each photo goes into whichever column is currently shortest.
function toColumns(photos: Photo[], count: number) {
  const columns = Array.from({ length: count }, () => ({
    height: 0,
    photos: [] as Photo[]
  }));
  for (const photo of photos) {
    const shortest = columns.reduce((a, b) => (b.height < a.height ? b : a));
    shortest.photos.push(photo);
    shortest.height += photo.height / photo.width;
  }
  return columns.map((column) => column.photos);
}

export function PhotoBoard({ photos }: { photos: Photo[] }) {
  const columns = toColumns(photos, useColumnCount());

  return (
    <div className='flex gap-4'>
      {columns.map((column, index) => (
        <div key={index} className='flex min-w-0 flex-1 flex-col gap-4'>
          {column.map((photo) => (
            // width and height reserve each photo's space before it loads.
            <img
              key={photo.id}
              src={photo.url}
              alt={photo.alt}
              width={photo.width}
              height={photo.height}
              loading='lazy'
              className='h-auto w-full rounded-xl'
            />
          ))}
        </div>
      ))}
    </div>
  );
}

What is Masonry layout?

In a masonry layout, each new item drops into whichever column is currently shortest, so tall and short items pack together without the gaps a regular grid leaves when items in a row have different heights. Columns stay aligned while rows stagger. It suits photos, pins, notes, and testimonials whose heights vary.

The order runs roughly left to right but hops between columns, so masonry is better for browsing than for content people read in sequence. Give items one fixed width, keep the gaps even, and reserve each image’s height up front with width and height or aspect-ratio so items do not jump as photos load.

CSS columns: 3 looks similar, but it fills the first column top to bottom before starting the next, which scrambles the order. Native CSS masonry is still rolling out across browsers, so most sites place items with a few lines of JavaScript or a small library.

Often confused with

Bento grid: A bento grid uses planned tile sizes that line up on a shared grid. A masonry layout accepts items of any height and packs them into columns.

All terms