Collection of free HTML and CSS masonry layout code examples. Update of February 2020 collection. 4 new items.

Related Articles

  1. CSS Magazine Layouts
Demo image: CSS Grid: Responsive Masonry Layout

Author

  • Saief Al Emon

Made with

  • HTML / CSS

About a code

CSS Grid: Responsive Masonry Layout

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

Responsive: yes

Dependencies: -

Demo image: Masonry-Style Layout

Author

  • Jen Simmons

Made with

  • HTML / CSS

About a code

Masonry-Style Layout

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

Responsive: yes

Dependencies: -

Demo image: Masonry Layout with CSS Grids

Author

  • Madalena

Made with

  • HTML / CSS

About a code

Masonry Layout with CSS Grids

CSS grids were used to create this masonry layout of images, no JavaScript was used. This is the best view on the large screen at this time.

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

Responsive: yes

Dependencies: -

Demo image: Photo Gallery

Author

  • Russ Perry

Made with

  • HTML / CSS (SCSS)

About a code

Photo Gallery

A masonry style photo gallery.

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

Responsive: yes

Dependencies: -

Demo image: CSS Masonry Effect

Author

  • Luca

Made with

  • HTML / CSS (SCSS)

About a code

CSS Masonry Effect

Masonry effect created only with CSS and HTML.

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

Responsive: yes

Dependencies: -

Demo image: Masonry Dynamic Column Flexbox

Author

  • Chris Weissenberger

Made with

  • HTML / CSS (SCSS) / JS

About a code

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.

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

Responsive: yes

Dependencies: -

Demo image: Only CSS Masonry

Author

  • Omar Trujillo

Made with

  • HTML / CSS

About a code

Only CSS Masonry

Responsive grid Masonry using only CSS (for modern browsers).

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

Responsive: yes

Dependencies: -

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

  • 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