10+ CSS Masonry Layouts: Free Code Snippets & Examples

css by Vladimir 3 min read

CSS masonry layouts organize asymmetric, variable-height grid items into seamless, Pinterest-style columns, eliminating horizontal blank spaces without requiring heavy DOM math. By packaging native column and grid structures, these templates deliver fluid image galleries and responsive dashboard feeds with pristine visual economy.

  • Modern engines compile native interlocking grids using experimental grid-template-rows: masonry declarations, aligning item heights dynamically within a single stylesheet rule.
  • Lightweight, highly performant multi-column fallbacks utilize the native CSS columns property, flowing content sequentially down vertical spans with zero script calculation.
  • To preserve INP (Interaction to Next Paint) performance during heavy rendering states, complex grid item translations are handled strictly on GPU compositor layers.

Explore these responsive card grids to master the integration of fluid, asymmetric multi-column layouts and native masonry styling into your web platforms.

Table of Contents:

  1. Examples
  2. Frequently Asked Questions

Examples

3x3 interlocking image grid with wavy scalloped borders created using CSS mask and radial gradients

Interlocking Wavy Image Grid

This is an Interlocking Wavy Image Grid. It applies procedural scalloped edges to raster images and shifts them into a tight, puzzle-like masonry formation. Its function is to break rigid, rectangular bounds in visual galleries, converting standard blocks into an organic, cohesive texture.

Technologies:
HTML CSS
Difficulty: Advanced
Browser Support (as of May 2026):
Chrome Chrome 111+ Edge Edge 111+ Firefox Firefox 112+ Safari Safari 15.4+
Features:
Wavy Borders CSS Masking Math Functions Interlocking Layout
Code by: Temani Afif Temani Afif
License: MIT

See the Pen Interlocking Wavy Image Grid.

Responsive masonry-style photo gallery with a blurred glassmorphism lightbox overlay and scale hover effects

Grid Lightbox Gallery Effect

This is a CSS Grid Lightbox Gallery Effect. It structures an asymmetric image grid that expands individual photos into a full-screen, blurred overlay upon interaction. Its primary function is to focus user attention on a single visual asset while maintaining the context of the underlying page through transparency.

Technologies:
HTML SCSS JavaScript
Difficulty: Beginner
Browser Support (as of Mar 2026):
Chrome Chrome 76+ Edge Edge 79+ Firefox Firefox 103+ Safari Safari 13+
Features:
Dense Grid Focus Trap
Code by: Harkishan Bhuva Harkishan Bhuva
License: MIT

See the Pen Grid Lightbox Gallery Effect.

A responsive grid of cards featuring illustrations, where each card is slightly rotated and scaled, creating a scattered paper effect on a dark background.

CSS Scroll-Driven Masonry Reveal

This Scroll-Driven Masonry Reveal creates a playful, tactile experience where content cards appear to be “dealt” onto the screen as the user scrolls. By leveraging the native CSS Scroll-driven Animations API, it achieves smooth, main-thread-free entrance effects without a single line of JavaScript. The layout adapts intelligently from 2 to 8 columns, making it a robust solution for image galleries or blog archives. (Requires: Open Props (CSS Library))

Technologies:
HTML CSS
Difficulty: Intermediate
Browser Support (as of Feb 2026):
Chrome Chrome 115+ Edge Edge 115+ Safari Safari 26+ Firefox Firefox (flag/polyfill)
Features:
Scroll Triggered Staggered Entrance Responsive Grid Reduced Motion
Code by: Adam Argyle Adam Argyle
License: MIT
Animated Portfolio with SVG ClipPath Hover Effect

Animated Portfolio with SVG ClipPath Hover Effect

This interactive portfolio showcases a masonry-style layout built with two overlapping CSS Grids, where grid-row: span and grid-column: span create the complex pattern. The key interaction is a unique “spotlight” reveal effect on hover, powered by a JavaScript-controlled SVG <clipPath> that dynamically updates the position of a <circle> mask to follow the mouse.

CSS Thumbnail Transition Effects

A fluid, responsive gallery that automatically adjusts to screen size and provides rich visual feedback on hover.

CSS Masonry

A responsive masonry-style image gallery constructed using CSS floats and media queries to manage varied tile dimensions.

See the Pen CSS Masonry.

CSS Grid Masonry

A dense, neat grid of cards with varying heights (Pinterest-style) that correctly rearranges upon window resizing and content loading.

See the Pen CSS Grid Masonry.

Pure CSS Masonry Gallery with Flexbox

Responsive Flexbox gallery with column count changing (3 → 2 → 1) via media queries. Hovering the container dims all images, individual item highlights. Titles absolutely positioned over pictures.

Responsive Pure CSS Masonry Layout

Responsive CSS multi‑column masonry with variable‑height tiles. Media queries adjust column count, pseudo‑elements show a counter and an emoji, background color and hover controlled by an SCSS mixin. Minimal yet flexible structure without images.

True Masonry with Grid Layout

Responsive CSS Grid with grid-auto-flow: dense and span-* classes to create tiles of varying sizes. repeat(auto-fill, minmax(180px, 1fr)) automatically adjusts column count, while dense flow fills the gaps. A simple yet clear demonstration of Grid capabilities.

See the Pen True Masonry with Grid Layout.

Easy Horizontal Masonry Effect with CSS Grid

Vertical page orientation (writing-mode) creates an unusual reading grid. Horizontal quote tiles are arranged in a CSS Grid with dense auto‑placement. span-* classes control item height, media queries adapt the grid to screen height.

Masonry Dynamic Column Flexbox

Masonry Dynamic Column Flexbox

Fixed‑height flexbox container with column wrap. Every sixth item has a predefined height, creating a mosaic rhythm without media queries. JavaScript adds/removes cards and inserts random images.

See the Pen Masonry Dynamic Column Flexbox.

Photo Gallery

Photo Gallery

CSS multi‑column gallery (columns). Images and captions automatically flow into 200px‑wide columns. Hover removes grayscale and changes border color. Minimal code with no media queries.

See the Pen Photo Gallery.

CSS Grid: Responsive Masonry Layout

CSS Grid: Responsive Masonry Layoutexternal link

Responsive image grid with CSS Grid using auto-fit and a minimum column width of 250px. Classes .wide, .tall, and .big let specific items span more space, creating a mosaic layout. Images are fitted into cells with object-fit: cover.

Masonry Layout with CSS Grids

Masonry Layout with CSS Grids

Masonry‑style layout using CSS Grid with fixed rows and manual cell placement. Images adapt to cells via object-fit: cover. No JavaScript — just Grid and explicit coordinates.

See the Pen Masonry Layout with CSS Grids.

Masonry-Style Layout

Masonry-Style Layout

A technical comparison of layout modes. Showcases experimental native Masonry vs. Grid, Flexbox, and Multi-column. Uses radio toggles with the ~ selector — no JavaScript. Employs auto-fill and gap for fluid sizing. Focuses on tight packing while preserving source order. Functional, minimal, and browser-forward.

See the Pen Masonry-Style Layout.

Frequently Asked Questions

Why is using native CSS properties for masonry grids superior to legacy JavaScript libraries like Packery or Isotope?

Native CSS properties calculate layout bounds and card positions directly within the browser’s C++ style engine, keeping the main thread free for interaction tasks. JavaScript masonry libraries must continuously measure client-heights via the DOM and apply inline absolute coordinates, resulting in severe layout thrashing and high input latency.

How do you maintain a logical keyboard tab order inside a CSS Columns masonry layout?

The CSS columns property flows elements vertically down columns rather than horizontally across rows, which can cause the visual tab order to conflict with the semantic DOM reading order. To maintain WCAG compliance, ensure screen readers parse the elements in a logical structural order, or use a flexible horizontal Grid fallback where sequential elements remain adjacent.

Why do massive image-heavy masonry feeds stutter during scroll, and how can they be optimized?

Stuttering occurs when dynamic image loading forces continuous, expensive layout reflows as card containers resize to fit original asset dimensions. To protect your INP score, declare an explicit aspect-ratio on all image wrappers, implement lazy-loading, and promote the card layers to the GPU using will-change: transform.

What is the main structural layout difference between a CSS Columns masonry and a Flexbox column masonry?

The CSS columns property automatically balances content columns vertically using a single container property, but wraps elements sequentially from top-to-bottom of the first column before starting the second. Flexbox columns require manually dividing items into multiple separate wrapping container nodes, which demands strict DOM-level data sorting but allows for easier horizontal-first reading flow.

What fallback strategy should be used for browser engines that do not yet support native CSS Grid Masonry?

Implement progressive enhancement by setting up your cards using CSS columns: 3 as your stable baseline. You can then wrap the advanced, native grid-masonry declarations inside an @supports (grid-template-rows: masonry) or (display: masonry) feature query, ensuring that modern engines render the perfect interlocking grid while legacy clients degrade to smooth vertical columns.