Streaming live at 10am (PST)

Webflow Masonry grid ( #Pinterest), no Custom Code required

Continuing the discussion from Masonry grid ( #Pinterest) in Webflow. Created by CSS only:

So lately, I found out that same CSS Masonry grid is possible to create WITHOUT ANY CUSTOM CODE. All you have to do is use Webflow text columns option for your “grid container” (or div, or section).
Items inside your container could be images, div blocks with text inside, lightboxes, link blocks, but they have to have WIDTH=100%. With every screen type (desktop, tablet, mobile) you can easy change columns option.

So, no more custom code. Masonry grid made with few clicks.

Here is examples:

Also, if you will add some creative you can even get a more interesting grid. Just make some of your items WIDTH=50%. But don’t forget that for this items height should be the same.


And sure, you can use these settings with dynamic list and dynamic items! :smile:


Masonry Layout With Flexbox
How to apply a masonry style to elements on a page
Staggered display for items in CMS
How to make a feed similar to Pinterest's smart feed or Instagram's explore feed
Image Gallery Design
Dynamic List grid layout breaks with long content
Need help with masonry effect: Flexbox or Columns?
Flexbox Full-width Responsive Multi-size Image Grid
Two columns Masonry Grid / CSS + JavaScript - RESOLVED
How are you implementing fallbacks for CSS grid?
Masonry grid help
Inherited a messy toggle grid, what tutorials do i need?
Need help with dynamic grid layout
[TUTORIAL] MixItUp filtering plugin with Dynamic content
Lightbox with masonry grid layout
Help recreating specific (simple!) design
Collection list items aligning with vertical gaps
CMS Blog Grid with uneven rows
Asymmetrical Grids
Thumbnails occupying variable number of "blocks"
Typographic Masonry Grid
Lightbox not working on my masonry grid
Pinterest style feed with flex and dynamic lists - Help :(
Dynamic List into a different Collection Page Template
Lightbox thumbnail
Stacking organically in a grid
Dynamic list layout on blog homepage
Problem with divs positioning (grid)
Masonry grid messing with overlays
Horizontal Masonry
Mixitup filtering and masonry (left to right) Issue
I want a template that does this
Collection list seamlessly populated with different aspect ratio images
Creating an image gallery that automatically adjusts grid margins
Blog Cards of different height
Need web design help for new website
Elements being displayed with no specific height
Two columns Masonry Grid / CSS + JavaScript - RESOLVED
Dynamic list with lightbox images displayed in masonry grid
Creating responsive gallery with varying heights. Grids or Columns?
Wookmark with dynamic lists
Can anybody help with different height collection list items?
How to create a portfolio with a collage layout
Photos at the top right flash when scrolling down

Great work @sabanna I’m so glad that you found that! :smiley: here’s an example of this working with Dynamic lists:
Read-Only Link:

Have fun! :smiley: I added a loading screen to this page (which fades out once assets have loaded).


Yeah! Really there are so many possibilities with such easy way to create this type of grid! :smiley:


my goodness this looks cool! We need a wiki…


Absolutely brilliant. You just moved from hero of the day to hero of the week. =)


Hahaha! Webflow magic :wink:


I looked in this but I don’t see how it was accomplished.


You girl are awesome :heart_eyes:


Can you share your read-only link?


Here it is:


Ok - I got the masonry grid but it doesn’t flow left to right, date goes by column. I don’t know if I like that. Is there a way to paginate my posts so I can make sure it’s fresh content in the grid? I have a million questions right now, I know. I also have a filter issue with the same site.


Awesome find! but I can’t get it to work :weary: can you explain a little bit more how to achieve that?

I tried putting various images inside a Div or Div’s inside that first Div but it doesn’t work and I get a strange cut on the images (div’s).

Thank you very much in advance.

1 Like

Hi @aaronocampo,
For proper alignment, make items inside the “grid div” display: inline-block and make sure their width is 100%.
Try it and let me know if it fixed the problem.



EDIT: Made it Inline Block, as you mentioned in one post. Solved! :smiley:

@sabanna Thank you so much :smile:

But there is one thing I cant solve
The ending of one block continues to next row,

see img

You know what Im doing wrong?


Getting here a little late… If I could hug you through the interwebz @sabanna, I would! Thanks!


Hi @krubens,
what if you will put rich text block in wrapper div? I think in that way it has to count like one whole item, not a text.

1 Like

:slight_smile: you are welcome, glad that it become really useful stuff

1 Like

All boxes are Divs, just hadn’t set them to inline block, that saved the day :smile:


Thank you again Sabana, YOU ROCK!! Worked like a charm.


For some reason it is not possible to integrate a webflow slider in the columns: when the slider is positioned after the first column the content (slides, left + right arrows, slide nav) doesn’t show up. I have been looking for a solution, but up till now I didn’t succeed. Any ideas?

Edit: It is an issue in Google Chrome mac, but not a problem in Safari or Firefox mac.
Readonly link of the raw material:

1 Like