Streaming live at 10am (PST)

CMS Blog Grid with uneven rows


#1

Hey all! I just launched a new website for the organization where I work. I love how it turned out and we're using Webflow CMS but I have a small issue. You can see the site here:

http://opsrc.net

If you go to the blog page and look you'll see holes in my grid. I have posted all our posts from our old blog and some rows just have one post and the lack of uniformity is killing me. Any ideas on what I should do?

Any help would be greatly appreciated. Here's the read-only link to the site:

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


Mismatched Layout Issue with Dynamic list
#2

Hi @rileyrichter,

Issue that you are experiencing happens because of structure of dynamic list. All your dynamic items has a settings "float: left" (it is how set up columns in dynamic content). Since all dynamic items has different height, some of them may prevent others proper floating

You have few ways to fix it:
- make all dynamic items same fixed height
- organize dynamic list in "masonry grid" by using CSS columns settings
(http://forum.webflow.com/t/webflow-masonry-grid-pinterest-no-custom-code-required/23551)

Regards,
Anna


#3

Ahhh, I don't understand how to work the masonry piece with the dynamic data. But that's a good fix. Appreciate it. Now I just need to figure out why the filter isn't working on the events dynamic data.


#4

For create masonry grid give some class to dynamic list and use CSS columns settings (right under font adjustments).
Dynamic items should be display: inline-block and width 100%


#5

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?


#6

Yes, Ben, you are right. CSS masonry makes content flow from up to down in columns. I think only jQuery masonry plugins can make it from left to right.

About pagination, I am using tabs for accomplishing this ( http://sapdesign.webflow.io/portfolio ). Every tab pane has dynamic list inside. You can control how many post will be on each list.


#7

Thanks so much for your help! I figured out pagination using the limit option. For now I only have about 45 blog posts, or around there. So I fixed using that option.


#8

Always glad to help. :smile: Feel free to ask if you have more questions.


#9

I appreciate all your insights!! :smiley: And as you can tell, I ask a lot of questions so I'm sure you'll hear from me again!! :joy: :joy: :joy:


#10