Welcome to our updated collection of hand-picked free HTML and CSS masonry layout code examples. This collection, updated in May 2021, has added 4 new items, all sourced from CodePen, GitHub, and other resources.
Masonry layouts are a popular choice for presenting images and other content on the web. They're named after the masonry technique used in construction, where bricks of different sizes are laid without gaps. Similarly, a masonry layout arranges elements of varying heights into a neat, gap-free structure.
In this collection, you'll find a variety of masonry layout designs that cater to different needs and aesthetics. From simple image galleries to complex web pages with text and multimedia content, there's something for everyone.
Each item in this collection has been hand-picked for its design quality and functionality. They are all built using HTML and CSS, making them easy to integrate into your projects. Plus, they're free to use!
So whether you're a seasoned developer looking for inspiration or a beginner seeking examples to learn from, this collection is a great resource. Dive in and explore these masonry layout code examples – you might just find the perfect one for your next project!
About a code
CSS Grid: Responsive Masonry Layout
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
About a code
Masonry-Style Layout
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
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: -
About a code
Photo Gallery
A masonry style photo gallery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
About a code
CSS Masonry Effect
Masonry effect created only with CSS and HTML.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
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: -
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: -
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: -
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: -
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
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: -
About the code
True Masonry with Grid Layout
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
About the code
Pure CSS Masonry Gallery with Flexbox
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
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
