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

HTML / CSS (SCSS)

Author

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

Html
Css/SCSS

Author

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

Html
Css/SCSS
Javascript

Author

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

Html
Css

Author

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

Html
Css/SCSS
Javascript

Author

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

Html
Css/SCSS
Javascript

Author

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

Html
Css/SCSS
Javascript

Author

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

Html
Css/SCSS

Author

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

Html
Css/SCSS

Author

Balázs Szikla

Demo

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


10.digistate

Made with

Html
Css/SCSS

Author

Pure CSS Masonry Gallery with Flexbox

Demo

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