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
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
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