logo

Layout and Columns

By default, elements stack vertically. Use columns to place things side by side.

import streamlit as st

col1, col2 = st.columns(2)

with col1:
    st.write("Left column")

with col2:
    st.write("Right column")

Unequal widths:

col1, col2 = st.columns([2, 1])  # 2:1 ratio

Sidebar for controls:

with st.sidebar:
    st.title("Settings")
    option = st.selectbox("Choose", ["A", "B"])

Expandable sections:

with st.expander("Click to expand"):
    st.write("Hidden content here")

Tabs for organization:

tab1, tab2 = st.tabs(["Data", "Charts"])
with tab1:
    st.dataframe(df)
with tab2:
    st.line_chart(df)

Good layout makes apps easier to use.

I cover layout patterns in my Streamlit course.