Tech With Galvan

Layout — from functional to professional

Your apps work. Now make them *look* like they work. Four tools — columns, sidebar, tabs, and metrics — turn a single-column script into something that looks designed.

Columns — side by side

code

import streamlit as st

left, right = st.columns(2)

with left:
    st.header("Input")
    name = st.text_input("Name")

with right:
    st.header("Output")
    if name:
        st.success(f"Hello, {name}!")

st.columns(2) gives two equal columns; pass ratios for custom widths — st.columns([0.7, 0.3]) makes the first twice as wide. Everything indented inside a with block lives in that column.

Sidebar — the control panel

The sidebar is where controls belong, keeping the main area clean:

code

filters = st.sidebar.selectbox("Category", ["All", "Tech", "Sports"])
show_chart = st.sidebar.checkbox("Show chart")

st.title("My Dashboard")
st.write(f"Showing: {filters}")

Dashboard rule of thumb: controls in the sidebar, results in the main area. You'll see this pattern in every data app in this course.

Tabs — multiple views, one page

code

tab1, tab2 = st.tabs(["📝 Editor", "👁 Preview"])

with tab1:
    st.write("Editing mode...")

with tab2:
    st.write("Preview mode...")

st.metric — numbers that look important

code

c1, c2, c3 = st.columns(3)
c1.metric("Revenue", "₹45,200", "+12%")
c2.metric("Users", "1,204", "+38")
c3.metric("Errors", "3", "-5", delta_color="inverse")

The label-value-delta trio is the standard way to show KPIs — every dashboard in this course opens with a metric row.

The layout decision guide

You have...	Use
Controls + results	st.sidebar + main area
Two related panels	st.columns
Multiple views of one thing	st.tabs
Key numbers to highlight	st.metric in columns

Common Errors & Fixes

Everything still stacks vertically — the content isn't inside the with block; check indentation.

Sidebar looks empty — widgets must be created via st.sidebar.xxx or inside with st.sidebar; plain st.text_input goes to the main area.

Columns collapse on mobile — that's automatic responsiveness; columns stack on small screens. Design for it.

What to try next

Rebuild the greeting app from Lesson 3: name input in the sidebar, output in the main area, greeting + a fun fact shown in two columns. Same logic — completely different feel. Layout is 80% of perceived quality.