TOP 12 CSS Masonry Layout Examples

PHOTO GALLERY

A masonry style photo gallery.

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

Author

  • Russ Perry

Made with

  • HTML / CSS (SCSS)

CSS MASONRY EFFECT

Masonry effect created only with CSS and HTML.

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

Author

  • Luca

Made with

  • HTML / CSS (SCSS)

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.

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

Author

  • Chris Weissenberger

Made with

  • HTML / CSS (SCSS) / JS

CSS-ONLY RESPONSIVE MASONRY

Simple yet beautiful pure CSS Masonry layouts.

Author

  • Rahul C.

Made with

  • HTML / CSS

SIMPLE MASONRY LAYOUTS WITH CSS FLEXBOX

A tutorial guide to show how to create CSS Flexbox-based Masonry layouts with horizontal and vertical orders of masonry items.

Author

  • Rahul C.

Made with

  • HTML / CSS

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

Author

  • Stephen Lee

Made with

  • HTML (Haml) / CSS (SCSS)

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.

Author

  • Andy Barefoot

Made with

  • HTML / CSS

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.

Demo image: Easy CSS Masonry Layout with Left-To-Right Content Flow

Author

  • Jesse Korzan

Made with

  • HTML / CSS / JavaScript

CSS GRID MASONRY

Masonry style layout with CSS Grid.

Author

  • Andy Barefoot

Made with

  • HTML / CSS / JavaScript

RESPONSIVE PURE CSS MASONRY LAYOUT

Responsive column masonry layout with CSS column-count.

Author

  • Stephanie

Made with

  • HTML / CSS (SCSS)

TRUE MASONRY WITH GRID LAYOUT

Author

  • Balázs Szikla

Made with

  • HTML / CSS (SCSS)

PURE CSS MASONRY GALLERY WITH FLEXBOX

Author

  • digistate

Made with

  • HTML / CSS (SCSS)

CSS MASONRY

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

Author

  • RenGM

Made with

  • HTML / CSS

Post navigation