SearchF
April 9, 2026/Intermediate/Galleries & Media

Masonry Grid

CSS-variable-driven masonry layout calculated in JavaScript. Columns and gaps are controlled via custom properties, items are absolutely positioned into the shortest column, and the grid reflows on resize. Supports four aspect-ratio variants per item: default (3/4), square, wide, and tall.

Live Demo ↗

Preview

Explore our gallery

Source

import MasonryGrid from './index.jsx';

const ITEMS = [
  // — batch 1 —
  { src: '/demo-assets/models/model0.png', alt: '', variant: 'tall' },
  { src: '/demo-assets/models/model1.png', alt: '' },
  { src: '/demo-assets/models/model2.png', alt: '', variant: 'square' },
  { src: '/demo-assets/models/model3.png', alt: '', variant: 'wide' },
  { src: '/demo-assets/models/model4.png', alt: '' },
  { src: '/demo-assets/models/model5.png', alt: '', variant: 'tall' },
  { src: '/demo-assets/models/model6.png', alt: '', variant: 'square' },
  { src: '/demo-assets/models/model7.png', alt: '' },
  { src: '/demo-assets/models/model8.png', alt: '', variant: 'wide' },

  // — batch 2 (different order + variants) —
  { src: '/demo-assets/models/model5.png', alt: '', variant: 'wide' },
  { src: '/demo-assets/models/model2.png', alt: '', variant: 'tall' },
  { src: '/demo-assets/models/model8.png', alt: '' },
  { src: '/demo-assets/models/model0.png', alt: '', variant: 'square' },
  { src: '/demo-assets/models/model7.png', alt: '', variant: 'wide' },
  { src: '/demo-assets/models/model3.png', alt: '' },
  { src: '/demo-assets/models/model1.png', alt: '', variant: 'tall' },
  { src: '/demo-assets/models/model6.png', alt: '', variant: 'wide' },
  { src: '/demo-assets/models/model4.png', alt: '', variant: 'square' },

  // — batch 3 (different order + variants) —
  { src: '/demo-assets/models/model4.png', alt: '', variant: 'tall' },
  { src: '/demo-assets/models/model8.png', alt: '', variant: 'square' },
  { src: '/demo-assets/models/model6.png', alt: '' },
  { src: '/demo-assets/models/model1.png', alt: '', variant: 'wide' },
  { src: '/demo-assets/models/model3.png', alt: '', variant: 'tall' },
  { src: '/demo-assets/models/model0.png', alt: '' },
  { src: '/demo-assets/models/model7.png', alt: '', variant: 'square' },
  { src: '/demo-assets/models/model2.png', alt: '' },
  { src: '/demo-assets/models/model5.png', alt: '', variant: 'tall' },
];

export default function MasonryGridDemo() {
  return <MasonryGrid title="Explore our gallery" items={ITEMS} />;
}

Related Components

1W AGO
BeNorth Reelgalleries
1W AGO
Lamalama Case Listgalleries
1W AGO
Inkfish Work Gridgalleries