CSS Masonry Layout
A Collection of free CSS masonry layout code examples for Web Developers.
1.PHOTO GALLERY
A masonry style photo gallery.
Made with
HTML / CSS (SCSS)
Author
Russ Perry
Demo
See the Pen Photo Gallery by Russ Perry (@rperry1886)
on CodePen.
2.CSS MASONRY EFFECT
Masonry effect created only with CSS and HTML.
Made with
Html
Css/SCSS
Author
Luca
Demo
See the Pen CSS Masonry Effect by Luca (@93lucasp)
on CodePen.
3.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.
Made with
Html
Css/SCSS
Javascript
Author
Chris Weissenberger
Demo
See the Pen Masonry Dynamic Column Flexbox (CSS Only) by Chris Weissenberger (@CAWeissen)
on CodePen.
4.MASONRY CARDS (CSS GRID) WITH BUTTONS
A simple masonry layout with cards, using CSS Grid for the main layout (with a little bit of Flexbox).
Made with
Html
Css
Author
Rahul C.
Demo
See the Pen Masonry cards (CSS Grid) with buttons by Stephen Lee (@abcretrograde)
on CodePen.
5.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.
Made with
Html
Css/SCSS
Javascript
Author
Andy Barefoot
Demo
See the Pen Easy Horizontal Masonry Effect with CSS Grid by Andy Barefoot (@andybarefoot)
on CodePen.
6.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.
Made with
Html
Css/SCSS
Javascript
Author
Jesse Korzan
Demo
https://masonry-css-js.netlify.com
https://github.com/jessekorzan/masonry-css-js
7.CSS GRID MASONRY
Masonry style layout with CSS Grid.
Made with
Html
Css/SCSS
Javascript
Author
Andy Barefoot
Demo
See the Pen CSS Grid Masonry (Step 10) by Andy Barefoot (@andybarefoot)
on CodePen.
8.RESPONSIVE PURE CSS MASONRY LAYOUT
Responsive column masonry layout with CSS column-count.
Made with
Html
Css/SCSS
Author
Stephanie
Demo
See the Pen Responsive Pure CSS Masonry Layout – Column Count by Stephanie (@ramenhog)
on CodePen.
9.TRUE MASONRY WITH GRID LAYOUT
Made with
Html
Css/SCSS
Author
Balázs Szikla
Demo
See the Pen True Masonry with Grid Layout by Balázs Sziklai (@balazs_sziklai)
on CodePen.
10.digistate
Made with
Html
Css/SCSS
Author
Pure CSS Masonry Gallery with Flexbox
Demo
See the Pen Pure CSS Masonry Gallery with Flexbox by digistate (@digistate)
on CodePen.