# Using Streamlit Layouts

Structuring Streamlit app layouts.

- Repository: https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop (521 stars)
- Category: Engineering
- License: Apache-2.0
- Last updated: 2026-06-03
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill using-streamlit-layouts -g -a claude-code -y`
Codex: `npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill using-streamlit-layouts -g -a codex -y`
Cursor: `npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill using-streamlit-layouts -g -a cursor -y`
Gemini CLI: `npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill using-streamlit-layouts -g -a gemini-cli -y`

## Description

Structuring Streamlit app layouts. Use when placing content in sidebars, columns, containers, or dialogs. Covers sidebar usage, column limits, horizontal containers, dialogs, and bordered cards.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Streamlit layout

How you structure your app affects usability more than you think.

## Sidebar: navigation + global filters only

The sidebar should only contain navigation and app-level filters. Main content goes in the main area.

```python
# GOOD
with st.sidebar:
    date_range = st.date_input("Date range")
    region = st.selectbox("Region", ["All", "US", "EU", "APAC"])
    st.caption("App v1.2.3")
```

```python
# BAD: Too much content in sidebar
with st.sidebar:
    st.title("Dashboard")
    st.dataframe(df)  # Don't put main content here
    st.bar_chart(data)
```

**What goes in sidebar:**
- Global filters (date range, user selection, region)
- App info (version, feedback link)

**What stays out:**
- Main content, charts, tables, results

## Columns: max 4, set alignment

Don't use too many columns, they get cramped.

```python
# GOOD
col1, col2 = st.columns(2)

# Custom widths (ratios)
col1, col2 = st.columns([2, 1])  # 2:1 ratio

# OK with alignment
cols = st.columns(4, vertical_alignment="center")

# BAD: Too many, cramped
col1, col2, col3, col4, col5, col6 = st.columns(6)
```

## Horizontal containers for button groups

Use `st.container(horizontal=True)` instead of columns for button groups:

```python
with st.container(horizontal=True):
    st.button("Cancel")
    st.button("Save")
    st.button("Submit")
```

## Aligning elements

Use `horizontal_alignment` on containers to position elements:

```python
# Center elements
with st.container(horizontal_alignment="center"):
    st.image("logo.png", width=200)
    st.title("Welcome")

# Right-align elements
with st.container(horizontal_alignment="right"):
    st.button("Settings", icon=":material/settings:")

# Distribute evenly (great for button groups)
with st.container(horizontal=True, horizontal_alignment="distribute"):
    st.button("Cancel")
    st.button("Save")
    st.button("Submit")
```

Options: `"left"` (default), `"center"`, `"right"`, `"distribute"`

## Bordered containers

The rest: https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop/blob/HEAD/.agents/skills/developing-with-streamlit/skills/using-streamlit-layouts/SKILL.md