Streaming live at 10am (PST)

Row alignment with CMS collections list layouts


#1

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!


Here is my public share link: http://altitude-afg.webflow.io/news
Here is my read-only link: https://preview.webflow.com/preview/altitude-afg?preview=50214a993ad8b5c5548589cf7c4108b7

The page is “News & Analysis” within the read-only link.



#2

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”

48%20PM

Then match the settings below

32%20PM

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!


#3

WRAP CHILDREN! This is a setting I just hadn’t used to date and is exactly what I needed. BRilliant! many thanks.


#4

Seems to work great on Desktop and Phone but Tablet its not working IPAD 9.7"


#5

@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.


#6

Sorry for missing this, are you still having trouble? If so, shoot over your Read-Only link and I’d be happy to take a look at it for you!