Insert containers laid out as side-by-side columns.

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

To add elements to the returned containers, you can use "with" notation (preferred) or just call methods directly on the returned object. See examples below.

Warning

Currently, you may not put columns inside another column.

Function signature

st.columns(spec)

Parameters

spec (int or list of numbers)

If an int
Specifies the number of columns to insert, and all columns have equal width.
If a list of numbers

Creates a column for each number, and each column's width is proportional to the number provided. Numbers can be ints or floats, but they must be positive.

For example, st.columns([3, 1, 2]) creates 3 columns where the first column is 3 times the width of the second, and the last column is 2 times that width.

Returns

(list of containers)

A list of container objects.

Examples

You can use with notation to insert any element into a column:

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")
(view standalone Streamlit app)

Or you can just call methods directly in the returned objects:

col1, col2 = st.columns([3, 1])
data = np.random.randn(10, 1)

col1.subheader("A wide column with a chart")
col1.line_chart(data)

col2.subheader("A narrow column with the data")
col2.write(data)
(view standalone Streamlit app)

Was this page helpful?

editSuggest edits
forum

Still have questions?

Our forums are full of helpful information and Streamlit experts.