Complex Lay outs

[Carlos_Gomes]

Hello! My name is Carlos and I’m new to streamlit and would like to replicate the low layout.

However, I’ve only managed to get the screen below so far, I’m finding it very complicated to have to look for the elements to create CSS.

Below is the program with CSS.

import random
import streamlit as st
import pandas as pd

#######################################
# PAGE SETUP
#######################################

st.set_page_config(page_title="Sales Dashboard", page_icon=":bar_chart:", layout="wide")

with open('style2.css') as f:
   st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True)

#st.title("Gestão do Projeto XYZ")

#######################################
# STREAMLIT LAYOUT
#######################################

top_left_column, top_right_column = st.columns([0.8,0.2])
bottom_left_column, bottom_right_column = st.columns(2)

with top_left_column:
    st.progress(50, text="Progresso")

    column_1, column_2, column_3, column_4 = st.columns(4)

    with column_1:
        st.metric(label="Iniciação", value="10")

    with column_2:
        st.metric(label="Planejamento", value="20")

    with column_3:
        st.metric(label="Execução", value="30")
        
    with column_4:
        st.metric(label="Encerramento", value="40")

with top_right_column:
    status = st.empty()
    status.text("Status")

with bottom_left_column:
    d = {'A': [1], 'B': [5], 'C': [2], 'C': [8]}
    df = pd.DataFrame()
    st.bar_chart(df)

with bottom_right_column:
    d = {'A': [1], 'B': [5], 'C': [2], 'C': [8]}
    df = pd.DataFrame(data=d)
    st.table(df)

div.st-emotion-cache-j5r0tf{
    color: #000000;
    background-color: #EEEEEE;
    border: 1px solid #dfdfdf;
    padding: 5% 5% 5% 10%;
    border-radius: 10px;
}

div[data-testid="stMetric"] {
    background-color: #EEEEEE;
    border: 1px solid #dfdfdf;
    padding: 5% 5% 5% 10%;
    border-radius: 10px;
}
div.e1i5pmia1{
    color: #000000;
}
div.e1i5pmia3{
    color: #000000;
}type or paste code here

Could you guide me?
Thank you for everyone’s attention.

[dataprofessor]

Hi @Carlos_Gomes

I recently created a tutorial on developing a dashboard with Streamlit with a 3 column layout.

Here’s the version using native Streamlit (see code):

And with some CSS styling (see code):

Here’s the accompanying video:

Crafting a Dashboard App in Python using Streamlit

Hope this gives you some ideas