Columns on different size screens

Ben11 · December 31, 2024, 2:14am

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:

mathcatsand · December 31, 2024, 5:53am

This isn’t natively supported yet, but there is an open issue you can upvote to help the devs prioritize it:

github.com/streamlit/streamlit

Wrap columns/grids on different screen sizes

opened 10:17PM - 14 Sep 22 UTC

quantoid

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.**

Topic		Replies	Views
St.Columns Responsive Behavior Using Streamlit discussion	2	53	December 9, 2024
Horizontal Flow layout Using Streamlit	4	2405	December 28, 2023
Changes in "st.column" placement according to screen size Using Streamlit discussion	5	670	August 22, 2024
Scrolling in a column Using Streamlit	5	9159	January 17, 2024
Column Layout Using Streamlit	3	875	August 9, 2023

Columns on different size screens

Related topics

Hello there 👋🏻

Cookie settings

Strictly necessary cookies

Performance cookies

Functional cookies

Targeting cookies