40+ CSS Masonry Layout Examples

Enjoy these visually stunning masonry examples. Curated collection of free 40+ HTML and CSS masonry layout code examples sourced from GitHub, Codepen, and various other sources.

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)