Horizontal Flow layout

Using Streamlit
1

Summary

Is there a way to create a layout that flows horizontally and overflows to the next row when the available space is used?

In my particular use case, all the elements are of equal size. (A bit like the grid layout in andfanilo’s cat application. However, I do not want the users to have control over the number of columns).

If this is not possible are the workarounds to achieve the desired effect?

2

Hey @hansthen,

Welcome to our forum :balloon:

You could just use @andfanilo’s app source code but remove the user inputs part? See those lines of code s4a_cats_grid/app.py at main · andfanilo/s4a_cats_grid · GitHub

Essentially, you build as many columns as there are elements, and iterate over them!

Hope that helps,

3

Hi @arnaud, thanks for the suggestion.

I tried that, but it did not give me the responsiveness that I wanted. When making the window more narrow the columns also became more narrow instead of overflowing to the next row.

4

There is a feature request on GitHub you can vote on:

I really want an st.grid element to provide this flex control outside of st.columns, too.

1 Like
5

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.