☰
×

Layout Streamlit Application

Chapters
Layout Streamlit Feature

Streamlit is an amazing technology that turns python scripts into shareable web apps in minutes. Streamlit enables developers to easily create beautiful web apps that can create great experiences for the users.

Let us learn about a few of the layout-style tips on Organizing the Streamlit application to make streamlit apps look even more visually appealing to the users.

Adding Columns

Streamlit now supports side-by-side columns where we can insert any Streamlit elements.

  • streamlit.columns() method is used to create columns in the streamlit application.

We can put columns anywhere in our app. We have to just declare each column as a new variable and then we can add any element or components from the streamlit library in the column.

  • streamlit.columns() takes an integer value as a parameter. The integer value specifies the number of columns to be created.
import streamlit as st
from PIL import Image

img = Image.open("file_name")

col_one, col_two = st.columns(2) #Creating two columns

col_one.header("Column 1")
col_one.image(img)

col_two.header("Column 2")
col_two.image(img)
Output
Column In Streamlit

Columns created by the st.columns() – method are responsive, that is the size of the columns changes with the width of the device in which the streamlit application has been opened.

Creating Grid

We can create as many columns as we want. In fact, by calling st.columns() inside a loop, we can get a grid layout!

import streamlit as st
from PIL import Image

img = Image.open("file_name")

st.write("Grid Layout")
for _ in range(5):
    cols = st.columns(4)
    cols[0].image(img)
    cols[1].image(img)
    cols[2].image(img)
    cols[3].image(img)
Output
Grid Layout Streamlit

Spaced Out Elements

We can also Space out the elements in columns. That is we can mention the width of elements respective to the total width available.

  • streamlit.columns() also takes tuple data type as input mentioning the respective width.
st.write("Spaced Out elements")
for _ in range(2):
    cols = st.columns((2, 1, 1))
    cols[0].image(img)
    cols[1].image(img)
    cols[2].image(img)
Output
Spaced Out Elements Streamlit