Collection list 4 column grid breaking awkwardly

Hi webflow community! I’m working on a team page that features 3 collection lists for each department. Each collection list has an image and 2 headlines. The issue I’m running into is I’ve selected the 4 column layout, but once my browser scales below 1615px the columns start to create spaces.

Here is my read only link: https://preview.webflow.com/preview/obviohealth?utm_medium=preview_link&utm_source=dashboard&utm_content=obviohealth&preview=568f78eab6b5f70f8b709fe2d9789d03&mode=preview

The page is ‘Our Team’


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey,

setting a “min-height” to the “team-collection-item” class fixes the problem. 400px seems to fit pretty nicely.

To piggy-back on what @robingranqvist mentioned, I’d also suggest you refrain from using the alternative layout options on the collection list element and instead keep it set to “Full Width” and use flexbox or grid display instead:

image

Just like the Column element, these options tend to work against you in some cases and are all but depreciated—not to mention flexbox/grid will give you more flexibility and control overall.

1 Like

@mikeyevin When I utilize the full-width setting I am unable to drag a div or grid to prevent each element from taking up the viewport. @robingranqvist Suggestion fixed the problem for me, but if you’re recommending a solution that is the best practice I’d like to give it a try.

This worked thank you!

Not sure what you mean by dragging a div, but the items should take up less space as soon as you set the Collection List to display: flex. To mimic the four column layout you have setup now, make sure select “Wrap” on the Children setting, and also set the sizing basis to 25% for the Collection Item:

image

image

You’re a maniac. This is awesome, thank you so much.

Hahah glad I could help! Obviously there are lots of different ways you can go about doing things, so if nothing else this gives you some idea of how you can tackle similar situations down the road.

A cool benefit of using flexbox is that you’re not limited to 4 static columns, so changing the the Justify setting to center will keep content on rows with 3 or fewer columns centered relative to the list as a whole: