40+ CSS Masonry Layout Examples

Are you looking to create a visually stunning masonry layout structure that uses a CSS grid or Flexbox? Your search ends here! In this collection, we are showcasing 40+ HTML and CSS masonry layout code examples that create visually appealing and eye-catching web projects. We’ve sourced these masonry layouts from GitHub, Codepen, and various other sources, automatically adjusting each item in columns best for showing images, text, and artwork in an aesthetically pleasing, space-efficient way.

We offer a diverse range of masonry code snippets, from basic grid layouts to more intricate flexbox layouts, which enhance the dynamic arrangement of items on a web page. Whether you’re building a portfolio website, e-commerce site, social media platform, or blog site, you can arrange any type of content using these captivating masonry grids.

Our curated compilation of CSS masonry layouts is easy to customise, improves aesthetics, and enhances the user experience, giving your site a unique and stylish look. Let’s checkout our collection today and make your website stand out with stunning, interactive 100% free CSS masonry layout designs.

1. CSS Grid L+L – Finished

See the Pen <a href="https://codepen.io/josephshambrook/pen/wYvYKr"> CSS Grid L+L – Finished</a> by Joseph Shambrook (<a href="https://codepen.io/josephshambrook">@josephshambrook</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Joseph Shambrook
Source: Code / Demo
Created on: SEPTEMBER 28, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

2. Pure CSS Masonry Gallery with Flexbox

See the Pen <a href="https://codepen.io/digistate/pen/GqKJNj"> Pure CSS Masonry Gallery with Flexbox</a> by digistate (<a href="https://codepen.io/digistate">@digistate</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: digistate
Source: Code / Demo
Created on: MAY 25, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

3. Photo Gallery

See the Pen <a href="https://codepen.io/rperry1886/pen/KKwbQNP"> Photo Gallery</a> by Russ Perry (<a href="https://codepen.io/rperry1886">@rperry1886</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Russ Perry
Source: Code / Demo
Created on: JANUARY 22, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

4. Masonry layout js

See the Pen <a href="https://codepen.io/crianbluff/pen/yxpodp"> Masonry layout js</a> by Crianbluff (<a href="https://codepen.io/crianbluff">@crianbluff</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Crianbluff
Source: Code / Demo
Created on: SEPTEMBER 9, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

5. CSS Grid: Columns (Pure CSS Masonry Layout)

See the Pen <a href="https://codepen.io/LasseStilvang/pen/BrpqKx"> CSS Grid: Columns (Pure CSS Masonry Layout)</a> by Lasse Stilvang (<a href="https://codepen.io/LasseStilvang">@LasseStilvang</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Lasse Stilvang
Source: Code / Demo
Created on: MARCH 20, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

6. Easy Horizontal Masonry Effect with CSS Grid

See the Pen <a href="https://codepen.io/andybarefoot/pen/BxwXNa"> Easy Horizontal Masonry Effect with CSS Grid</a> by Andy Barefoot (<a href="https://codepen.io/andybarefoot">@andybarefoot</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Andy Barefoot
Source: Code / Demo
Created on: MAY 7, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

7. Masonry Grid Animation & Fancybox

See the Pen <a href="https://codepen.io/ungmo2/pen/QGqjmW"> Masonry Grid Animation & Fancybox</a> by Ungmo Lee (<a href="https://codepen.io/ungmo2">@ungmo2</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ungmo Lee
Source: Code / Demo
Created on: NOVEMBER 28, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

8. Easiest Masonry grid layout Tutorial.

See the Pen <a href="https://codepen.io/css-ftw/pen/EvRPWr"> Easiest Masonry grid layout Tutorial.</a> by CSSFTW (<a href="https://codepen.io/css-ftw">@css-ftw</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: CSSFTW
Source: Code / Demo
Created on: AUGUST 23, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

9. CSS Grid: Responsive Masonry Layout

See the Pen <a href="https://codepen.io/iamsaief/pen/jObaoKo"> CSS Grid: Responsive Masonry Layout #1</a> by Saief Al Emon (<a href="https://codepen.io/iamsaief">@iamsaief</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Saief Al Emon
Source: Code / Demo
Created on: MAY 4, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

10. Responsive Pure CSS Masonry Layout – Column Count

See the Pen <a href="https://codepen.io/ramenhog/pen/dvZVda"> Responsive Pure CSS Masonry Layout – Column Count</a> by Stephanie (<a href="https://codepen.io/ramenhog">@ramenhog</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Stephanie
Source: Code / Demo
Created on: MARCH 17, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

11. Masonry Layout Demo 1

See the Pen <a href="https://codepen.io/jensimmons/pen/QWjqbJj"> Masonry Layout Demo 1</a> by Jen Simmons (<a href="https://codepen.io/jensimmons">@jensimmons</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jen Simmons
Source: Code / Demo
Created on: MAY 1, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

12. Masonary Wall

See the Pen <a href="https://codepen.io/keyurparalkar/pen/WGeLaz"> Masonary Wall</a> by KEYUR PARALKAR (<a href="https://codepen.io/keyurparalkar">@keyurparalkar</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: KEYUR PARALKAR
Source: Code / Demo
Created on: AUGUST 31, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

13. Masonry Grid Gallery – CSS Practice

See the Pen <a href="https://codepen.io/katehummer/pen/jByjzM"> Masonry Grid Gallery – CSS Practice</a> by Kate Hummer (<a href="https://codepen.io/katehummer">@katehummer</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kate Hummer
Source: Code / Demo
Created on: MARCH 9, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

14. Masonry Layout JS Vanilla

See the Pen <a href="https://codepen.io/Mathiew82/pen/qzoKOK"> Masonry Layout JS Vanilla</a> by Alberto Mateo (<a href="https://codepen.io/Mathiew82">@Mathiew82</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alberto Mateo
Source: Code / Demo
Created on: JULY 2, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

15. Easy CSS Masonry Layout with Left-To-Right Content Flow

Author: Jesse Korzan
Source: Code / Demo
Created on: APRIL 7, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

16. Bootstrap 4 Masonry Layout

See the Pen <a href="https://codepen.io/techiediaries/pen/EQbYpZ"> Bootstrap 4 Masonry Layout</a> by Techiediaries (<a href="https://codepen.io/techiediaries">@techiediaries</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Techiediaries
Source: Code / Demo
Created on: FEBRUARY 15, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

17. Masonry Dynamic Column Flexbox (CSS Only)

See the Pen <a href="https://codepen.io/CAWeissen/pen/xxxQpba"> Masonry Dynamic Column Flexbox (CSS Only)</a> by Chris Weissenberger (<a href="https://codepen.io/CAWeissen">@CAWeissen</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chris Weissenberger
Source: Code / Demo
Created on: NOVEMBER 16, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

18. Masonry Layout

See the Pen <a href="https://codepen.io/SaidElBakkali/pen/zygObp"> Masonry Layout</a> by Said El Bakkali (<a href="https://codepen.io/SaidElBakkali">@SaidElBakkali</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Said El Bakkali
Source: Code / Demo
Created on: JANUARY 19, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

19. CSS Only Masonry Layout (No CSS Grid)

See the Pen <a href="https://codepen.io/kreigd/pen/KRYzdd"> CSS Only Masonry Layout (No CSS Grid)</a> by Kreig Durham (<a href="https://codepen.io/kreigd">@kreigd</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kreig Durham
Source: Code / Demo
Created on: MAY 23, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

20. Masonry Layout with filtering

See the Pen <a href="https://codepen.io/dan10gc/pen/GMBxaN"> Masonry Layout with filtering</a> by Daniel Gonzalez (<a href="https://codepen.io/dan10gc">@dan10gc</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Daniel Gonzalez
Source: Code / Demo
Created on: OCTOBER 12, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

21. Masonry with Flexbox + JS

See the Pen <a href="https://codepen.io/chriscoyier/pen/pqEgBV"> Masonry with Flexbox + JS</a> by Chris Coyier (<a href="https://codepen.io/chriscoyier">@chriscoyier</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chris Coyier
Links: Code / Demo
Created on: DECEMBER 18, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Slim), CSS(SCSS), JavaScript

22. Masonry Layout – CSS Grid

See the Pen <a href="https://codepen.io/matchboxhero/pen/xPLaWr"> Masonry Layout – CSS Grid</a> by Steven Roberts (<a href="https://codepen.io/matchboxhero">@matchboxhero</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Steven Roberts
Source: Code / Demo
Created on: NOVEMBER 15, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

23. Infinite Scroll v4 – Masonry, vanilla JS

See the Pen <a href="https://codepen.io/desandro/pen/XgRpNr"> Infinite Scroll v4 – Masonry, vanilla JS</a> by Dave DeSandro (<a href="https://codepen.io/desandro">@desandro</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dave DeSandro
Source: Code / Demo
Created on: JUNE 20, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

24. CSS Masonry Effect

See the Pen <a href="https://codepen.io/93lucasp/pen/LYYMYoB"> CSS Masonry Effect</a> by Luca (<a href="https://codepen.io/93lucasp">@93lucasp</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Luca
Source: Code / Demo
Created on: NOVEMBER 17, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

25. Masonary Wall

26. Pinterest like grid (Masonry Layout) Pure CSS

See the Pen <a href="https://codepen.io/urias/pen/Wbpvzd"> Pinterest like grid (Masonry Layout) Pure CSS</a> by Urias (<a href="https://codepen.io/urias">@urias</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Urias
Source: Code / Demo
Created on: JANUARY 13, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

27. Testimonials/Reviews Using Masonry

See the Pen <a href="https://codepen.io/TylerBerry/pen/KwbKqg"> Testimonials/Reviews Using Masonry</a> by Tyler Berry (<a href="https://codepen.io/TylerBerry">@TylerBerry</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Tyler Berry
Source: Code / Demo
Created on: MARCH 19, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

28. CSS Column masonry layout

See the Pen <a href="https://codepen.io/trevoreyre/pen/eegqXP"> CSS Column masonry layout</a> by Trevor Eyre (<a href="https://codepen.io/trevoreyre">@trevoreyre</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Trevor Eyre
Source: Code / Demo
Created on: NOVEMBER 10, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

29. Flexbox Masonry — Horizontal

Author: Rahul
Source: Code / Demo
Created on: MARCH 8, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

30. Masonry-Like CSS Grid

See the Pen <a href="https://codepen.io/tehg33k/pen/qBdQOEN"> Masonry-Like CSS Grid</a> by Justin Goff (<a href="https://codepen.io/tehg33k">@tehg33k</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Justin Goff
Source: Code / Demo
Created on: MARCH 25, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

31. Masonry – columnWidth

See the Pen <a href="https://codepen.io/desandro/pen/nPmYeE"> Masonry – columnWidth</a> by Dave DeSandro (<a href="https://codepen.io/desandro">@desandro</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dave DeSandro
Source: Code / Demo
Created on: JUNE 12, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

32. Masonry/Packery/Isotope layout

See the Pen <a href="https://codepen.io/englishextra/pen/mRJxwR"> Masonry/Packery/Isotope layout</a> by englishextra (<a href="https://codepen.io/englishextra">@englishextra</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: englishextra
Source: Code / Demo
Created on: JANUARY 7, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

33. Only CSS Masonry

See the Pen <a href="https://codepen.io/CyFox/pen/MWWEwjg"> Only CSS Masonry</a> by Omar Trujillo (<a href="https://codepen.io/CyFox">@CyFox</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Omar Trujillo
Source: Code / Demo
Created on: OCTOBER 29, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

34. Creating a Responsive Pure CSS Masonry Layout

Author: Rahul
Source: Code / Demo
Created on: MARCH 28, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

35. Flexbox Masonry

See the Pen <a href="https://codepen.io/lukejacksonn/pen/QyPPmK"> Flexbox Masonry</a> by lukejacksonn (<a href="https://codepen.io/lukejacksonn">@lukejacksonn</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: lukejacksonn
Source: Code / Demo
Created on: FEBRUARY 18, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript(Babel)

36. CSS Grid Masonry (Step 10)

See the Pen <a href="https://codepen.io/andybarefoot/pen/QMeZda"> CSS Grid Masonry (Step 10)</a> by Andy Barefoot (<a href="https://codepen.io/andybarefoot">@andybarefoot</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Andy Barefoot
Source: Code / Demo
Created on: SEPTEMBER 10, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

37. Masonry

See the Pen <a href="https://codepen.io/Vidy/pen/LEOaeg"> Masonry</a> by RenGM (<a href="https://codepen.io/Vidy">@Vidy</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: RenGM
Source: Code / Demo
Created on: FEBRUARY 9, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

38. Simple Masonry Layout With Flexbox

See the Pen <a href="https://codepen.io/dudleystorey/pen/WNNwmp"> Simple Masonry Layout With Flexbox</a> by Dudley Storey (<a href="https://codepen.io/dudleystorey">@dudleystorey</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dudley Storey
Source: Code / Demo
Created on: MARCH 1, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

39. Bootstrap Masonry Grid Template

See the Pen <a href="https://codepen.io/artursden/pen/dRWeBw"> Bootstrap Masonry Grid Template</a> by Artūrs Deņisovs (<a href="https://codepen.io/artursden">@artursden</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Artūrs Deņisovs
Source: Code / Demo
Created on: JUNE 21, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

40. Masonry Layout with CSS Grids

See the Pen <a href="https://codepen.io/Maza-designDev/pen/OJVgRrx"> Masonry Layout with CSS Grids</a> by Madalena (<a href="https://codepen.io/Maza-designDev">@Maza-designDev</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Madalena
Source: Code / Demo
Created on: MARCH 1, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

41. Responsive pseudo Masonry in CSS columns

See the Pen <a href="https://codepen.io/olivier-c/pen/KNvVMq"> Responsive pseudo Masonry in CSS columns</a> by Olivier C (<a href="https://codepen.io/olivier-c">@olivier-c</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Olivier C
Source: Code / Demo
Created on: NOVEMBER 26, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Stylus)