Ben11
December 31, 2024, 2:14am
1
I have made a dashboard app which at the top has a row of 4 tiles, using st.column(4) to create this effect with st.container s. This looks great on large screens, however on mobile, it defaults to 4 rows of 1 wide column.
I want to be able to arrange these into 2 rows of 2 tiles, for small mobile screens, but 1 row of 4 tiles on larger screens.
See attached an image showing the desktop layout, vs mobile layout:
This isn’t natively supported yet, but there is an open issue you can upvote to help the devs prioritize it:
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.**
system
June 29, 2025, 5:53am
3
This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.
