Possible to change layout (columns) based on number of items in a collection list?

I would like to change between 1 , 2 and 3 columns based on the amount of items the collection contains. No problem to do this layout change between the different screen resolutions, but is it possible to do this based on the number of items in a collection list?


EDIT: I found a temporary workaround by adding a switch field in the CMS that the user can manually turn on if the collection has more that 4 items. This switch activates a visibility condition toggling between two different layout containers, one with 1 column and one with 2 columns. It works, but would be nice with an automatic layout change based on the number of items.

1 Like

This is just an aside and no help at the moment, but this is one of the nifty things that CSS grids can handle…you can set the grid rows or columns to automatically responsively expand as they fill up, so the fifth item in your example would start a new column, etc. I’m loving Webflow, but I really hope that CSS grid functionality gets added as a feature.

A couple of things to add:

@Christoffer
Have you tried changing the advanced child settings to shrink/grow (Flexbox) - see Nelson’s tutorial here: https://webflow.com/blog/designing-dynamic-lists-with-flexbox - it’s maybe not quite what you are after but worth a thought.

@matt.bryant
Always worth tuning into @PixelGeek fortnightly workshop/livestreams - Tuesdays 10am (Central) - he announced at the end of yesterday’s stream that 14th August @Lindapham will be on air talking about CSS Grid in Webflow.
Webflow Workshop #125: Creating a full page 3D scrolling effect - Crowdcast - 51:50

https://wishlist.webflow.com/ideas/WEBFLOW-I-480

2 Likes

Fantastic! Thanks for the links and heads up!