3 JavaScript Masonry Layouts

by Vladimir 1 min read

Build fluid, gapless grid layouts with JavaScript Masonry effects. This collection showcases cascading grids that auto-adjust to content size, enabling dynamic, Pinterest-style designs ideal for galleries, portfolios, blogs, and content-heavy interfaces.

Examples

Adaptive image gallery grid with fluid flexbox rows and smooth fade-in lazy loading

Responsive Fluid Photo Gallery Grid

This is a Responsive Fluid Photo Gallery Grid. It organizes varied aspect-ratio images into justified rows without cropping essential content. Its primary function is to optimize visual space, ensuring edge-to-edge alignment while deferring offscreen asset loading for strict performance control. (Requires: lazysizes, object-fit-images)

Technologies:
Pug Sass JavaScript
Difficulty: Intermediate
Browser Support (as of Mar 2026):
Chrome Chrome 80+ Edge Edge 80+ Firefox Firefox 75+ Safari Safari 13+
Features:
Fluid Grid Lazy Loading Smart Scaling
Code by: Mikita Chyzhyk Mikita Chyzhyk
License: MIT
A masonry grid of bird photographs that tilt on hover, with one card expanding to reveal full-screen content

Tilt Grid Content Reveal

This is a Tilt Grid Content Reveal. It transforms a standard masonry image gallery into a highly interactive, spatial experience. Its function is to provide an engaging browsing interface where hovering induces physical 3D tilt, and clicking smoothly expands the thumbnail into a full-screen presentation, completely immersing the user in the selected content. (Requires: GSAP, charming.js, masonry.js, imagesloaded.js)

Technologies:
HTML CSS JavaScript
Difficulty: Advanced
Browser Support (as of Mar 2026):
Chrome Chrome 60+ Edge Edge 79+ Firefox Firefox 55+ Safari Safari 11+
Features:
3D Hover Tilt Grid Expansion Staggered Typography Scroll to Top
Code by: Sebi Sebi
License: MIT

See the Pen Tilt Grid Content Reveal.

Web Component: Simple Masonry V2 + LightGalleryexternal link