How can I achieve a more pleasing User Experience when repeating containers with different heights?

Hi everyone,
we’ve built an app which is working quite well so far.

There’s just one issue:

In this screenshot you cann see the main scrollview. Within the scrollview is a container with the layout set to horizontal. The content is fetched from an API (repeat with) and changes on a daily basis and depending on the user that logs into the app.

My issue are the gaps which are caused by the main containers layout setting to horizontal. Since the amount of products in each Category is different the row height is determined by the the category with the most products in it.

When I set the main containers layout to vertical I need some kind of limiter which forces the content into a new column otherwise the scrollview will lead to just one long column.

This is where I am struggling and where I am hoping for someones input. If there are any other “more dynamic” components (cards or somethin?) I could use I would appreciate a hint.

Thanks in advance!

Maybe something along these lines can help you out:

The way how you structured these cards can be something that might need a little adjustment towards the abovementioned layout.

1 Like