So I’ve got a CMS collection for “news” items. The preview descriptions for the articles vary significantly, so if i choose to have a set height sufficiently tall enough to contain the longest previews, some of the shortest ones look dumb. But when I let the collection create 3 columns to display, I’m left with big gaps in rows when previous rows’ articles were a bit too long. See below:
It appears that the CMS WANTS to do a masonry layout, but it’s still trying to force rows. Is there some better option besides the default collections layouts to display these?
Anyone have advice on the best way to solve this (besides limiting the preview text to a sufficiently short length or leaving lots of empty space in some of the stories with short previews)?
If just the CMS would truncate text at X characters, this wouldn’t be a problem!
Have you tried using Flexbox for this section? Support is getting pretty good and it’s a very simple fix if it’s a possibility.
Just make sure the main container (collection-list) is set to “Flex”
Then match the settings below
That’s it! Now your items will adjust depending on the height of the element and wrap exactly how (I hope) you’re wanting it to.
Let me know if you have any issues!
Edit: Just figured I’d add some extra links for you to check out. Flexbox is super powerful, and thankfully Webflow has an entire course on it you can follow here. If you’re interested in the support for Flexbox, head over here. Cheers!
@mikeyevin Thank!!! I’ve been working on this issue for days and fixing the height of the collection item did not convince me very much. However, FLex parent and ‘wrap children’ is amazing. It works great.
I’ve done those settings and my website still continues to show my CMS itens separated by rows. Besides, I’ve entered the Read-Only link from @DanPollock and even with the post marked as resolved by the answer from @mikeyevin , his website is also showing the same problem.
Did I lost some update for how to solve this issue?
