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

1.CodePen Home

True Masonry with Grid Layout

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Balázs Sziklai

Demo


2.PHOTO GALLERY

A masonry style photo gallery.

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Russ Perry

Demo


3.CSS MASONRY EFFECT

Masonry effect created only with CSS and HTML.

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
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

1
2
3
Html
Css/SCSS
Javascript

Author

1
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

1
2
3
Html
Css/SCSS
HTML (Haml) / CSS (SCSS)

Author

1
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

1
2
Html
Css/SCSS

Author

1
Andy Barefoot

Demo


7.CSS GRID MASONRY

Masonry style layout with CSS Grid.

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Andy Barefoot

Demo


8.RESPONSIVE PURE CSS MASONRY LAYOUT

Responsive column masonry layout with CSS column-count.

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Stephanie

Demo


9.PURE CSS MASONRY GALLERY WITH FLEXBOX

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
digistate

Demo


10.CSS MASONRY

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

Made with

1
2
Html
Css/SCSS

Author

1
RenGM

Demo