Streamlit

Streamlit columns

August 17, 2025 Pere No comments yet

Columns allow us to display elements side by side horizontally .

It is useful for dashboards, forms and various Ui layout

Need a Streamlit developer?: Click here

Introduction

st.columns insert containers laid out as side by side columns.

It inserts a number of multi-element containers laid out side by side and returns a list of container objects.

Syntax

st.columns(spec, *, gap=”small”, vertical_alignment=”top”, border=False, width=”stretch”)

spec: int → number of equal-width columns. list → relative widths (e.g., [1,2,3]).

gap: space between columns → “small”(1rem, default), “medium”(2rem), “large”(4rem), or None.

vertical_alignment: “top” (default), “center”, or “bottom”.

border: True → shows border around columns, False (default).

width: “stretch” (default) or fixed int (px).

Returns: list of column containers.

				
					import streamlit as st

col1, col2 = st.columns(2)

col1.write("This is the first column")
col2.write("This is the second column")

Creating Uneven Columns

st.columns(3) splits the screen into three elements.

				
					col1, col2, col3 = st.columns(3)

col1.write("Column 1")
col2.write("Column 2")
col3.write("Column 3")

Custom Width Columns

we can pass a list of ratios to st.columns

				
					col1, col2 = st.columns([2, 1])
col1.write("2/3 of space")
col2.write("1/3 of space")

Nested Columns

we can create nested columns by writing columns inside a column using “with”

				
					
col1, col2 = st.columns(2)

with col1:
    st.write("Inside first column")
    subcol1, subcol2 = st.columns(2)
    subcol1.write("Nested Col 1")
    subcol2.write("Nested Col 2")


with col2:
    st.write("Second column content")

Adding widgets inside columns

we can add widget of various kind inside columns

				
					col1, col2 = st.columns(2)

with col1:
    name = st.text_input("Enter your name")

with col2:
    age = st.number_input("Enter your age", 1, 100)

Buttons in columns

				
					col1, col2, col3 = st.columns(3)

if col1.button("Option A"):
    st.write("You clicked A")

if col2.button("Option B"):
    st.write("You clicked B")

if col3.button("Option C"):
    st.write("You clicked C")

Chart with columns

we can create charts with columns also.

				
					import pandas as pd
import numpy as np

df = pd.DataFrame(np.random.randn(20, 3), columns=['A', 'B', 'C'])

col1, col2 = st.columns(2)

col1.line_chart(df['A'])
col2.bar_chart(df['B'])

Here, we create 3 columns with relative widths

col1: width ratio 1

col2: width ratio 2

col3: width ratio 1

				
					col1, col2, col3 = st.columns([1,2,1])
col2.write("Centered Content")

Side by Side Forms

st.columns(2) splits the screen into two equal columns.

You can use the with statement to insert any element into a column

col1 (left) and col2 (right) with each column, we create a form inside

				
					col1, col2 = st.columns(2)

with col1.form("First form"):
    st.text_input("First name")
    st.form_submit_button("Submit")

with col2.form("Second Form"):
    st.text_input("Email")
    st.form_submit_button("Submit")

Let's conclude by displaying pictures

				
					import streamlit as st

col1, col2, col3 = st.columns(3)

with col1:
    st.header("A cat")
    st.image("https://static.streamlit.io/examples/cat.jpg")

with col2:
    st.header("A dog")
    st.image("https://static.streamlit.io/examples/dog.jpg")

with col3:
    st.header("An owl")
    st.image("https://static.streamlit.io/examples/owl.jpg")

Want to learn more about streamlit?: Click Here

Watch videos on Streamlit: