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?
arnaud
December 28, 2022, 2:38pm
2
Hey @hansthen ,
Welcome to our forum
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,
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.
There is a feature request on GitHub you can vote on:
opened 10:17PM - 14 Sep 22 UTC
type:enhancement
feature:st.columns
### Problem
Our Streamlit dashboard has users with different width screens, som… e 4K others not. If we put everything in one column it gets very long, and for 4K users there's tons of wasted empty space either side. If we use full width with columns it's much better for 4K users, but other users get things squished into narrow side-by-side columns.
### Solution
What we need is basically the [flex-wrap](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flex-wrap) option provided by CSS flexboxes, where items are laid out in a row if there's room, but they wrap to give a column on smaller screens.
An implementation of this might be an option passed to `st.column` that tells it to wrap on smaller screens to maintain a minimum pixel width per column. Or perhaps a new function `st.grid` that arranges things in a grid of boxes where the rows and columns adjust to suit the user's screen.
---
Community voting on feature requests enables the Streamlit team to understand which features are most important to our users.
**If you'd like the Streamlit team to prioritize this feature request, please use the 👍 (thumbs up emoji) reaction in response to the initial post.**
I really want an st.grid element to provide this flex control outside of st.columns, too.
1 Like
