Post thumbnail: 10 CSS Masonry Layout Examples

10 CSS Masonry Layout Examples

Collection of free HTML and CSS masonry layout code examples.

Related Articles

  1. CSS Magazine Layouts

Author

  • Rahul C.

Made with

  • HTML / CSS

About the code

CSS-only Responsive Masonry

Simple yet beautiful pure CSS Masonry layouts.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Rahul C.

Made with

  • HTML / CSS

About the code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Stephen Lee

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Andy Barefoot

Made with

  • HTML / CSS

About the code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

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

Author

  • Jesse Korzan

Made with

  • HTML / CSS / JavaScript

About the code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Andy Barefoot

Made with

  • HTML / CSS / JavaScript

About the code

CSS Grid Masonry

Masonry style layout with CSS Grid.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: imagesloaded.pkgd.js

Author

  • Stephanie

Made with

  • HTML / CSS (SCSS)

About the code

Responsive Pure CSS Masonry Layout

Responsive column masonry layout with CSS column-count.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Bal√°zs Szikla

Made with

  • HTML / CSS (SCSS)

About the code

True Masonry with Grid Layout

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • digistate

Made with

  • HTML / CSS (SCSS)

About the code

Pure CSS Masonry Gallery with Flexbox

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • RenGM

Made with

  • HTML / CSS

About the code

CSS Masonry

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

back to top