25+ CSS Masonry Layout Examples (Free Code + Demos)
Enjoy this useful, 100% free and open source collection of HTML and CSS masonry layout code examples. These are all easy to integrate into your website / project.
1. CSS Masonry Effect
Masonry effect created only with CSS and HTML
Author: Luca (93lucasp)
Links: Source Code / Demo
Created on: November 17, 2019
Made with: HTML, SCSS
Tags: masonry, css, html, grid, css puzzle
2. Masonry Dynamic Column Flexbox (CSS Only)
The trick here is using "flex flow: column wrap;" and a fixed height so that the content will wrap to the new column. I've set the heights for each element to make sure the bottom is flush, so the next element will wrap to a new column whenever it cannot fit. This masonry layout is best ...Read More
Author: Chris Weissenberger (CAWeissen)
Links: Source Code / Demo
Created on: November 15, 2019
Made with: HTML, SCSS, JS
Tags: masonry, column, layout, flex, flexbox
3. 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 (andybarefoot)
Links: Source Code / Demo
Created on: May 6, 2018
Made with: HTML, CSS
Tags: cssgrid, vertical-lr, horizontal-scroll, masonry
4. Responsive CSS Masonry
100% Responsive. Resize the browser window to see the action.
5. CSS Masonry Photo Gallery
A masonry style photo gallery.
Author: Russ Perry (rperry1886)
Links: Source Code / Demo
Created on: January 21, 2020
Made with: HTML, SCSS
Tags: cpc-photo-gallery, codepenchallenge
6. Easy CSS Masonry Layout With Left-To-Right Content Flow
There are times when a masonry layout is an appropriate design decision. Depending on what else that design has to accommodate, these solutions might be a good fit.
Created on: April 7, 2018
7. CSS Flexbox Masonry — Horizontal And Vertical
CSS Flexbox module allows you to layout things more easily.
8. True Masonry With Grid Layout
Author: Balázs Sziklai (balazs_sziklai)
Links: Source Code / Demo
Created on: November 25, 2016
Made with: HTML, SCSS
9. CSS Grid Masonry
Number 10 of a series of 10 code examples supporting an article on CSS Grid Masonry layouts: https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb For CSS Grid expertise: Rachel Andrew: https://gridbyexample.com/ Jen Simmons: http://labs.jensimmons.com/
Author: Andy Barefoot (andybarefoot)
Created on: September 10, 2017
Made with: HTML, CSS, JS
Tags: css-grid, masonry, javascript
10. JS Masonry
A Masonry grid design. All images from Unsplash. The grid is responsive and pure CSS.
Author: RenGM (Vidy)
Links: Source Code / Demo
Created on: February 9, 2015
Made with: HTML, CSS
Tags: grid, pure-css, responsive, tiles
11. Pure CSS Masonry Gallery With Flexbox
Author: digistate (digistate)
Links: Source Code / Demo
Created on: May 24, 2016
Made with: HTML, SCSS
12. Responsive Masonry Grid
A pure CSS-only responsive masonry.
Author: chenchen (qq7886)
Links: Source Code / Demo
Created on: March 20, 2016
Made with: HTML, CSS
Tags: masonry, layout, grid, responsive, waterfall
13. Easiest Masonry Grid Layout Tutorial.
All you need to know to get a 100% responsive Masonry grid layout in 11 easy steps!
Author: CSSFTW (css-ftw)
Links: Source Code / Demo
Created on: August 23, 2017
Made with: HTML, CSS, JS
Tags: masonry, grid, tutorial, portfolio
14. Rahul Arora's Left-to-right Masonry Layout Using CSS Grid
https://w3bits.com/css-grid-masonry/
Author: Chris Coyier (chriscoyier)
Links: Source Code / Demo
Created on: January 11, 2019
Made with: HTML, CSS, JS
15. [BT] Hover Text - Masonry Gallery
Author: Nico (nico-judge)
Links: Source Code / Demo
Created on: August 11, 2020
Made with: HTML, CSS
Tags: masonry, bootstrap, hover, grid
16. Clean CSS Masonry Gallery
Author: Ramos__Dev (RamosDev)
Links: Source Code / Demo
Created on: May 8, 2020
Made with: HTML, CSS
Tags: grid, masonry, gallery, css
17. CSS Masonry Gallery
Author: Polina Shchegoleva (codepoli)
Links: Source Code / Demo
Created on: April 18, 2020
Made with: HTML, Less, TypeScript
Tags: masonry, css-gallery, css-columns, react map
18. CSS Grid: Responsive Masonry Layout
Super cool image grid layout with CSS Grid. Its fully responsive, source order independent and very easy to code. Have fun, cheers!
Author: Saief Al Emon (iamsaief)
Links: Source Code / Demo
Created on: May 4, 2020
Made with: HTML, CSS
Tags: masonry, layout, css, grid, responsive
19. Masonry-Like CSS Grid
As an example of a Masonry styled grid layout where not all the tiles are the same size, I made this example based off of a project I once did on a WordPress site. The Load More button simply just clones the grid as if its pulling in more posts from a blog on a WordPress site.
Author: Justin Goff (tehg33k)
Links: Source Code / Demo
Created on: March 25, 2020
Made with: HTML, CSS, JS
Tags: cssgrid, grid, masonry, css, html
20. CSS Masonry
Responsive masonry grid layout Each div have a background image On screen over 700px , card with class fat = twice as tall & wide as regular card tall = twice as tall as regular card wide = twice as wide as regular card To understand the "span" keyword in css-grid https://alligator.io/cs...Read More
Author: Maxime (maximedaraize)
Links: Source Code / Demo
Created on: March 10, 2020
Made with: HTML, SCSS
Tags: css, css-grid, masonry, layout
21. Bootstrap Masonry Layout
Masonry cards with the structure of bootstrap. Background images. Background transition on hover.
Author: Luis Badiali (badiali)
Links: Source Code / Demo
Created on: March 5, 2020
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: bootstrap, masonry, cards, grid, layout
22. Only CSS Masonry
Responsive grid Masonry using only CSS (for modern browsers)
Author: Omar Trujillo (CyFox)
Links: Source Code / Demo
Created on: October 29, 2019
Made with: HTML, CSS
Tags: masonry, css, nojs, grid
23. Black Friday Grid Items
prototype of a black friday sale & giveaway preview using css grid layout. grid-auto-flow: dense is pretty cool.
Author: Jake Peterson (jake101)
Links: Source Code / Demo
Created on: November 23, 2019
Made with: HTML, CSS, Babel
Tags: cssgrid, ecommerce, blackfriday, cameras, masonry
More Awesome Lists:
Share: