Streaming live at 10am (PST)

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


#1

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.

Example:

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

Regards!
Anna


Masonry Layout With Flexbox
Staggered display for items in CMS
Dynamic list with lightbox images displayed in masonry grid
Blog Cards of different height
Dynamic List grid layout breaks with long content
Image Gallery Design
How to apply a masonry style to elements on a page
Asymmetrical Grids
Dynamic List into a different Collection Page Template
Masonry grid messing with overlays
Wookmark with dynamic lists
How to create a portfolio with a collage layout
Photos at the top right flash when scrolling down
Flexbox Full-width Responsive Multi-size Image Grid
Elements being displayed with no specific height
Masonry grid help
Dynamic list layout on blog homepage
Problem with divs positioning (grid)
Horizontal Masonry
Inherited a messy toggle grid, what tutorials do i need?
Stacking organically in a grid
Need help with dynamic grid layout
Pinterest style feed with flex and dynamic lists - Help :(
Need help with masonry effect: Flexbox or Columns?
Lightbox thumbnail
#2

Great work @sabanna I'm so glad that you found that! :smiley: here's an example of this working with Dynamic lists: http://flow-in.webflow.io/masonary
Read-Only Link: https://preview.webflow.com/preview/flow-in?preview=99d20c3007c32ab09ef1da4455a8de8c

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


Isotope + Webflow... Filter grid based layouts with ease
#3

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


#4

my goodness this looks cool! We need a wiki...


#5

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


#6

Hahaha! Webflow magic :wink:


#7

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


#8

You girl are awesome :heart_eyes:


#9

Can you share your read-only link?

http://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link


#10

Here it is:

https://preview.webflow.com/preview/opsrc-12471d?preview=213578e1124f4b9954760e08ffdaa7c4


#11

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.


#12

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.


#13

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.

Cheers,
Anna


#14

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?

https://preview.webflow.com/preview/testings-ccae61?preview=086f8c863cc4142c7c63cd82ede3517f


#15

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


#16

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.


#17

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


#18

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


#19

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


#20

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:
https://preview.webflow.com/preview/buro-tank?preview=ca77e59b29ee314383a796e13d7164e0