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

Links
Made with
- HTML / CSS
About a code
CSS Grid: Responsive Masonry Layout
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Masonry-Style Layout
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
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: -

Links
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: -

Links
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: -

Links
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: -

Links
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: -
About the code
CSS-only Responsive Masonry
Simple yet beautiful pure CSS Masonry layouts.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
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: -
Links
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: -

Links
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: -
Links
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
Links
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: -
Links
Made with
- HTML / CSS (SCSS)
About the code
True Masonry with Grid Layout
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Pure CSS Masonry Gallery with Flexbox
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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