CSS Masonry Layout

A Collection of free CSS masonry layout code examples for Web Developers.

1.PHOTO GALLERY

A masonry style photo gallery.

Made with

1
HTML / CSS (SCSS)

Author

1
Russ Perry

Demo

See the Pen Photo Gallery by Russ Perry (@rperry1886) on CodePen.


2.CSS MASONRY EFFECT

Masonry effect created only with CSS and HTML.

Made with

1
2
Html
Css/SCSS

Author

1
Luca

Demo

See the Pen CSS Masonry Effect by Luca (@93lucasp) on CodePen.


3.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

See the Pen Masonry Dynamic Column Flexbox (CSS Only) by Chris Weissenberger (@CAWeissen) on CodePen.


4.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
Html
Css

Author

1
Rahul C.

Demo

See the Pen Masonry cards (CSS Grid) with buttons by Stephen Lee (@abcretrograde) on CodePen.


5.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
3
Html
Css/SCSS
Javascript

Author

1
Andy Barefoot

Demo

See the Pen Easy Horizontal Masonry Effect with CSS Grid by Andy Barefoot (@andybarefoot) on CodePen.


6.EASY CSS MASONRY LAYOUT WITH LEFT-TO-RIGHT CONTENT FLOW

CSS column-count for masonry-style layouts is dead easy (couple lines of CSS and very minimal markup to get it going). The only “help” that JS provides is re-ordering the array before rendering to the view so that we can use CSS column-count for the layout.

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Jesse Korzan

Demo

https://masonry-css-js.netlify.com

https://github.com/jessekorzan/masonry-css-js


7.CSS GRID MASONRY

Masonry style layout with CSS Grid.

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Andy Barefoot

Demo

See the Pen CSS Grid Masonry (Step 10) by Andy Barefoot (@andybarefoot) on CodePen.


8.RESPONSIVE PURE CSS MASONRY LAYOUT

Responsive column masonry layout with CSS column-count.

Made with

1
2
Html
Css/SCSS

Author

1
Stephanie

Demo

See the Pen Responsive Pure CSS Masonry Layout - Column Count by Stephanie (@ramenhog) on CodePen.


9.TRUE MASONRY WITH GRID LAYOUT

Made with

1
2
Html
Css/SCSS

Author

1
Balázs Szikla

Demo

See the Pen True Masonry with Grid Layout by Balázs Sziklai (@balazs_sziklai) on CodePen.


10.digistate

Made with

1
2
Html
Css/SCSS

Author

1
Pure CSS Masonry Gallery with Flexbox

Demo

See the Pen Pure CSS Masonry Gallery with Flexbox by digistate (@digistate) on CodePen.