Is it possible to make this layout in Streamlit?

🎈 Using Streamlit
1
  1. Are you running your app locally or is it deployed? Locally.
  2. Share the full text of the error message (not a screenshot). Not an error.
  3. Share the Streamlit and Python versions. Python: 3.8.16, Streamlit: 1.28.0.

Hey all.
I am looking to make this layout on Streamlit. Is it possible? Thanks.

Untitled
Untitled872×517 394 Bytes

2

Hey @MedAzizTousli! Welcome to the community, it’s great to have you here! :wave:

You sure can! Streamlit provides a flexible layout system that lets you create multiple columns. Here’s how you can create the layout depicted in your image:

image
image1370×680 24.6 KB

Here’s the code:

import streamlit as st

st.title("Streamlit Column Layout")

# First row with two columns
col1_1, col1_2 = st.columns(2)
with col1_1:
    st.write("Column 1.1")
with col1_2:
    st.write("Column 1.2")

# Second row with a single centered column
col2_left, col2, col2_right = st.columns([1, 2, 1])
with col2:
    st.write("Column 2")

# Third row with two columns
col3_1, col3_2 = st.columns(2)
with col3_1:
    st.write("Column 3.1")
with col3_2:
    st.write("Column 3.2")

Let me know if you’d need anything else!

Best,
Charly