Master Streamlit Grid Layouts: 5 Pro Tips for 2025

# The old way: Awkward and limited
import streamlit as st

col1, col2 = st.columns([2, 1]) # Proportions are the only lever

with col1:
    st.line_chart(my_large_data)

with col2:
    st.metric("Metric A", 123)
    st.metric("Metric B", 456) # Stacked vertically, no other choice

# The 2025 way: Flexible and powerful
import streamlit as st

# Define a grid: 2 columns, 2 rows
grid = st.grid(2, 2)

# The first cell spans 2 rows, creating a tall column
grid.line_chart(my_large_data, use_container_width=True)

# The next cells fill the remaining space
grid.metric("Metric A", 123)
grid.metric("Metric B", 456)

Let's see how you can use a simple radio button to dynamically reconfigure your layout:

import streamlit as st

# Some dummy data elements
def display_card(title):
    st.subheader(title)
    st.write("Some content for this card.")
    st.bar_chart(np.random.randn(10, 3))

# Let the user choose the layout
layout_choice = st.radio(
    "Choose your layout view:",
    ('Compact', 'Detailed'),
    horizontal=True,
    label_visibility="collapsed"
)

st.markdown("---_**")

if layout_choice == 'Compact':
    # A 2x2 grid for a compact overview
    grid = st.grid(2, 2)
    grid.container(border=True)._run(display_card, ("Chart A",))
    grid.container(border=True)._run(display_card, ("Chart B",))
    grid.container(border=True)._run(display_card, ("Chart C",))
    grid.container(border=True)._run(display_card, ("Chart D",))
else:
    # A 2-column grid for more detailed, vertical views
    grid = st.grid(2)
    grid.container(border=True)._run(display_card, ("Chart A",))
    grid.container(border=True)._run(display_card, ("Chart B",))
    grid.container(border=True)._run(display_card, ("Chart C",))
    grid.container(border=True)._run(display_card, ("Chart D",))

This technique is incredibly powerful. You're no longer building one static layout; you're building a dynamic system that can adapt to your user's needs. It's a fundamental step towards creating app-like experiences within Streamlit.

3. Unleash the Power of Nesting

Just like Russian dolls or bento boxes, the real power of grids comes from nesting them. You can place a grid inside another grid's cell. This allows for incredibly granular control and the creation of complex, self-contained components.

Think of a dashboard card. The card itself is an element in your main page grid. But inside that card, you might want a title, a metric, and a small chart, all arranged in their own specific layout. Nesting makes this clean and manageable.

import streamlit as st

# Main page layout: a simple 2-column grid
main_grid = st.grid(2)

# --- First main cell ---
main_grid.header("Main Content Area")
main_grid.write("This area holds the primary information.")

# --- Second main cell (our component card) ---
with main_grid.container(border=True):
    st.subheader("Detailed KPI Card")

    # Nested grid for the card's internal layout
    nested_grid = st.grid(2)
    nested_grid.metric("Revenue", "$42.5M", "+12%")

    # This container in the nested grid holds a chart
    with nested_grid.container():
        st.write("Monthly Trend")
        st.area_chart(my_revenue_data, height=150)

By nesting, you keep the logic for the card's layout entirely separate from the main page's layout. This makes your code more modular, easier to read, and much simpler to debug.

4. Adopt a 'Container-First' Mindset

This is less of a code trick and more of a powerful development philosophy. Before you even think about your grid, wrap your intended section in an st.container. This has two huge benefits:

1. Visual Grouping: Using st.container(border=True) instantly draws a visual boundary around a set of related elements. This is one of the easiest ways to improve the visual hierarchy and clarity of your app.
2. Code Isolation: A container acts as a namespace for the elements inside it. It prevents elements from accidentally spilling out or interfering with other parts of your app. It's the perfect parent for an st.grid.

Instead of this:

# Messy, global-scope layout
st.subheader("My Dashboard")
grid = st.grid(3)
grid.metric(...)
grid.line_chart(...)
# ... more elements ...

Adopt this cleaner, more robust pattern:

# Clean, container-first approach
with st.container(border=True):
    st.subheader("My Dashboard")
    grid = st.grid(3)
    grid.metric(...)
    grid.line_chart(...)
    # ... all dashboard elements are neatly contained ...

This simple habit makes your apps look more polished and your codebase significantly more organized. It's a small change in process that pays huge dividends in maintainability.

5. Add Professional Polish with Vertical Alignment

Have you ever placed a short metric next to a tall chart and been bothered by how they align at the top by default? It can make an otherwise great layout feel a bit... off. This is where st.grid's vertical_align parameter becomes your best friend.

This small but mighty feature controls how elements are aligned vertically within their grid cells. You can choose between "top", "middle", and "bottom".

Look at the difference it makes:

import streamlit as st

st.subheader("Default (Top) Alignment")
default_grid = st.grid(2)
default_grid.metric("Active Users", "1,200", "+5%")
default_grid.bar_chart(my_user_data)

st.markdown("---_**")

st.subheader("Polished (Middle) Alignment")
# Just add vertical_align="middle"!
polished_grid = st.grid(2, vertical_align="middle")
polished_grid.metric("Active Users", "1,200", "+5%")
polished_grid.bar_chart(my_user_data)

Using vertical_align="middle" is often the secret ingredient that makes a dashboard feel balanced and professionally designed. It’s a one-word change that shows you care about the details of user interface design.

---

From Script to Application

Mastering layout is the critical step that elevates your Streamlit projects from simple scripts to full-fledged applications. By moving beyond st.columns, embracing dynamic and nested grids, thinking 'container-first', and polishing with details like vertical alignment, you gain complete control over the user experience.

The web is a grid. Now, your Streamlit apps can be too. Go ahead and start refactoring one of your old projects with these tips—you’ll be amazed at the difference it makes.