A Collection of 10 Best CSS Masonry Layout Examples For Web Developers.

1.CodePen Home

True Masonry with Grid Layout

Made with

Html
Css/SCSS
Javascript

Author

Balázs Sziklai

Demo


2.PHOTO GALLERY

A masonry style photo gallery.

Made with

Html
Css/SCSS
Javascript

Author

Russ Perry

Demo


3.CSS MASONRY EFFECT

Masonry effect created only with CSS and HTML.

Made with

Html
Css/SCSS
Javascript

Author

Luca

Demo


4.MASONRY DYNAMIC COLUMN FLEXBOX

This masonry layout is best suited for content without long text or with no text at all (such as images) as long text will not wrap, but instead, squeeze its container against the other columns.

Made with

Html
Css/SCSS
Javascript

Author

Chris Weissenberger

Demo


5.MASONRY CARDS (CSS GRID) WITH BUTTONS

A simple masonry layout with cards, using CSS Grid for the main layout (with a little bit of Flexbox).

Made with

Html
Css/SCSS
HTML (Haml) / CSS (SCSS)

Author

Stephen Lee

Demo


6.EASY HORIZONTAL MASONRY EFFECT WITH CSS GRID

Using CSS Grid and writing-mode: vertical-lr to create a tiled layout that automatically populates from top-to-bottom, left-to-right as more content is added.

Made with

Html
Css/SCSS

Author

Andy Barefoot

Demo


7.CSS GRID MASONRY

Masonry style layout with CSS Grid.

Made with

Html
Css/SCSS
Javascript

Author

Andy Barefoot

Demo


8.RESPONSIVE PURE CSS MASONRY LAYOUT

Responsive column masonry layout with CSS column-count.

Made with

Html
Css/SCSS
Javascript

Author

Stephanie

Demo


9.PURE CSS MASONRY GALLERY WITH FLEXBOX

Made with

Html
Css/SCSS
Javascript

Author

digistate

Demo


10.CSS MASONRY

A Masonry grid design. All images from Unsplash. The grid is responsive and pure CSS.

Made with

Html
Css/SCSS

Author

RenGM

Demo