Discover the best masonry websites created by professional designers. Get inspired and start planning your perfect masonry web design today!

My YouTube Webflow community asked for a nice grid design as a tutorial, so I recreated Vitaa Architects' Journal section as an example: have a look at the original website here: vitaarchitecture.com/journal

They didn't use css grid for their layout but I found it is a perfect use case for it. 
The grid contains several collection lists which are always limited to one item. This allowed me to create a more varied grid design.  

I also use a fluid design system. It scales down the grid on the desktop breakpoint from 1600px downwards. The custom CSS for this is written in the global-css embed.

Watch the tutorial here: https://youtu.be/9plbrIo4lfM

🖤

Free Grid Design Template (CMS ready)

Refokus

Empowering the Webflow Community, Agencies and Marketing Teams with Refokus Tools. A free collection of our in-house tools, adding more functionality to Webflow.

We created Refokus Tools to give back to the community—collecting our knowledge and sharing it one designer, developer, marketer, and brand manager at a time.

Current Tools:
- Social Share
- Time to Read
- Slider Generator
- Page Transitions
- Rich Text Enhancer
- Masonry Layout
- Form Validator
- Image Magnifier
- CMS Filters
- Automatic Tabs
- API Filler (Data)
- CMS Prev/Next
- CMS Load More
- Copy to Clipboard
- CMS Tabs

New tools coming every month! 

Refokus Tools (v2)

Refokus Tools

Its so simple *.*
ahh and its a CMS Lightbox ;D


++ New Version ++
https://webflow.com/website/unsplash-clone

masonry grid

CMS vertical masonry grid

Simple, cloneable implementation of the Isotope Masonry layout plugin with easy filter controls. All styling + filtering is controlled WITHIN the Webflow interface.

You have a ".grid" container, inside that you have individual grid ".items"... In a div above that you have your filter/sorting functions in a ".filter" container that holds your buttons. Just add a custom "data-filter" attribute to the buttons to control the filtering.

Enjoy.

Isotope

Isotope + Webflow

Hey this project is the redesign of Unsplash.com

Features:
1) Masonry Grid (it works almost 100% with webflow, the code is used to create the masonry effect) btw its a collection list

2) Custom CMS Lightbox (create your own lightbox and add content to the lightbox)

Have fun with it :D


Original
https://unsplash.com

Unsplash

Unsplash Masonry

Achieve Pinterest-style layouts for your CMS collections by changing just 2 style properties. Ideal for image galleries or unsorted CMS collections.

Easy masonry

Easy Masonry (Pinterest style layout)

New version of the masonry grid:
https://webflow.com/website/unsplash-clone


Doc
https://github.com/bigbite/macy.js

Horisontal Masonry Grid

Horizontal Masonry. Grid

BuildBites

Hey there!👋
We have built super-popular Pinterest (a-ka masonry) grid that powered by native Webflow CMS.

Use it freely! :)

P.s. Need a website? Drop us a line at hi@buildbites.com.
We provide an unlimited Webflow development for a flat monthly fee!

CMS-based Masonry Grid

CMS based Pinterest (Masonry) grid

Website Design for Melbourne Deejays & Event runners...

Website features:
- CMS soundcloud files without zapier
- HTML5 canvas animation
- instagram like gallery on image gallery
- CMS gallery
- CMS slider
- Custom animations
- Ecommerce Slider (Shop not setup)
- Counter

InSessionsMockup

insessions-mockup

How to add Masonry Layout in Webflow?

Use Refokus Masonry to create a Masonry Layout (Pinterest Style) that’s also fully responsive!

Refokus Tools - Masonry

Masonry Layout (by Refokus)

Masonry.js from David DeSandro is a powerful cascading grid layout library and it works great with flexbox in Webflow. This javascript is a little bit harder to set up than Macy.js but but renders a bit smoother when changing the window size. This project uses masonry in connection with a CMS Blog Collection. Feel free to clone if you like it ;-). 

Source: https://masonry.desandro.com/ | https://github.com/desandro/masonry

Masonry Layout (masonry.js)

Smoothly Masonry Layout with Masonry.js from David DeSandro

Memberstack

The perfect masonry grid to use for testimonials - or anything else!

Check out the original template here 👉 https://www.memberstack.com/freebies/16-online-course-template

Testimonials Masonry Grid

Playground

Thinking-Twins Webflow Playground

Macy.js is a lightweight masonry layout library and it works great in webflow. This project uses masonry in connection with a CMS Blog Collection. Feel free to clone if you like it ;-).

Masonry Layout (Javascript)

Masonry Layout with Macy.js

Nube

A fun and colorful masonry grid with animated cards using GSAP Flip as part of our GSAP Daily challenge 15/50.

✦

Need help with your next Webflow project?
Visit https://www.wearenube.xyz/
Or let's talk at https://book.morgen.so/stefan04/meet

nf-daily-15

Masonry grid with GSAP Flip card animation / GSAP daily 15/50

Client request for CMS style 'grid', this solution uses flex box. 

Simply copy the contents of the page wrapper to your project.

CMS Masonry Style Grid

CMS Masonry Style Grid

Responsive Pinterest layout grid using "column-count" CSS property. Divide a parent element to a specified number of columns at break points. Can work with CMS inside a collection list.

Masonry Grid Layout

Client request - Actual CMS Grid with 3 size options available in the CMS items.

Discover masonry websites built by the Webflow community

Discover masonry websites built by the Webflow community