Feature Request: Mobile st)columns Layout Control

Using Streamlit
,
1

Request for a way to maintain horizontal grid layouts (like 5x5 grids) on mobile devices, rather than forcing vertical column stacking.

Building interactive games, dashboards, or grid-based interfaces that need to maintain their structure across all device sizes. Current mobile behavior breaks grid-based layouts by forcing columns to stack vertically.

Sample Code (Always stacks vertically).
Any workarounds?

import streamlit as st

st.set_page_config(page_title=“Grid Layout Test”, layout=“wide”)

st.title(“5x5 Grid Layout Test”)
st.write(“Desktop/Tablet: Shows 5x5 grid”)
st.write(“Mobile: Stacks vertically (breaks grid layout)”)

CSS attempt to force grid layout

st.markdown(“”"

.grid-container [data-testid="column"] { width: 20% !important; flex: 0 0 20% !important; min-width: 20% !important; max-width: 20% !important; } @media (max-width: 767px) { .grid-container > div { display: flex !important; flex-direction: row !important; } .grid-container [data-testid="column"] { width: 20% !important; flex: 0 0 20% !important; } }

“”", unsafe_allow_html=True)

st.markdown(‘

’, unsafe_allow_html=True)

Create 5x5 grid

for row in range(5):
cols = st.columns(5)
for col, column in enumerate(cols):
with column:
button_num = row * 5 + col + 1
st.button(f"{button_num}“, key=f"btn_{button_num}”, use_container_width=True)

st.markdown(‘

’, unsafe_allow_html=True)

2

Although it’s not ready yet, flex layouts are on our roadmap and under development.

image
image1438×1640 302 KB