Column

Overview

The Column component is a layout container that arranges child components vertically. Use it to create stacked layouts and control how components are distributed vertically in your interface.

Basic usage

import gradio as gr

with gr.Blocks() as demo:
    with gr.Column():
        gr.Textbox(label="Name")
        gr.Textbox(label="Email")
        gr.Button("Submit")

demo.launch()

Parameters

int

default:"1"

Relative width compared to adjacent Columns. For example, if Column A has scale=2, and Column B has scale=1, A will be twice as wide as B.

int

default:"320"

Minimum pixel width of Column, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in a column narrower than min_width, the min_width parameter will be respected first.

Literal['default', 'panel', 'compact']

default:"'default'"

Column type. ‘default’ adds no additional styling. ‘panel’ adds a border and padding. ‘compact’ removes the gap between components.

bool

default:"True"

If False, column will be hidden.

str | None

default:"None"

An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.

list[str] | str | None

default:"None"

An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.

bool

default:"True"

If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.

Behavior

Column scaling

When multiple Columns are placed in a Row, the scale parameter controls relative widths:

import gradio as gr

with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column(scale=2):
            gr.Image(label="Main content - 2/3 width")
        with gr.Column(scale=1):
            gr.Textbox(label="Sidebar - 1/3 width")

demo.launch()

Minimum width

Columns will wrap to a new line if the screen is too narrow:

import gradio as gr

with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column(min_width=400):
            gr.Textbox(label="Needs 400px minimum")
        with gr.Column(min_width=200):
            gr.Textbox(label="Needs 200px minimum")

demo.launch()

Examples

Panel variant

Create a visually distinct column with a border:

import gradio as gr

with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column(variant="panel"):
            gr.Markdown("### Settings")
            gr.Slider(label="Temperature")
            gr.Slider(label="Max tokens")
        with gr.Column():
            gr.Textbox(label="Output")

demo.launch()

Compact layout

Remove spacing between components:

import gradio as gr

with gr.Blocks() as demo:
    with gr.Column(variant="compact"):
        gr.Markdown("### Compact Form")
        gr.Textbox(label="Field 1")
        gr.Textbox(label="Field 2")
        gr.Textbox(label="Field 3")

demo.launch()

Create a classic sidebar layout:

import gradio as gr

with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column(scale=1, min_width=250):
            gr.Markdown("### Controls")
            model = gr.Dropdown(["GPT-4", "Claude"], label="Model")
            temp = gr.Slider(0, 2, label="Temperature")
            submit = gr.Button("Generate")
        
        with gr.Column(scale=3):
            gr.Markdown("### Output")
            output = gr.Textbox(lines=20, label="Generated text")

demo.launch()

Multi-column grid

Create a responsive grid layout:

import gradio as gr

with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column(min_width=300):
            gr.Image(label="Image 1")
            gr.Textbox(label="Caption 1")
        with gr.Column(min_width=300):
            gr.Image(label="Image 2")
            gr.Textbox(label="Caption 2")
        with gr.Column(min_width=300):
            gr.Image(label="Image 3")
            gr.Textbox(label="Caption 3")

demo.launch()

Nested columns

Combine Columns for complex layouts:

import gradio as gr

with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column(scale=1):
            with gr.Column(variant="panel"):
                gr.Markdown("### Input")
                gr.Textbox(label="Prompt")
            with gr.Column(variant="panel"):
                gr.Markdown("### Settings")
                gr.Slider(label="Strength")
        
        with gr.Column(scale=2):
            gr.Image(label="Generated Image")

demo.launch()

Methods

update

Update the column’s properties:

import gradio as gr

with gr.Blocks() as demo:
    col = gr.Column(visible=True)
    with col:
        gr.Textbox(label="Hidden content")
    
    toggle_btn = gr.Button("Toggle Column")
    toggle_btn.click(
        lambda: gr.Column(visible=False),
        outputs=col
    )

demo.launch()

Notes

When Columns are nested directly within a Blocks context (not in a Row), they will appear one below the other, each taking the full width.

Use min_width to ensure your layout remains usable on smaller screens. The layout will automatically wrap columns to new lines when needed.

The variant="panel" option is great for creating visually distinct sections in your interface, especially for sidebars or settings panels.

Overview

Input Components

Output Components

Layout Components

Control Components

Special Components

Overview

Basic usage

Parameters

Behavior

Column scaling

Minimum width

Examples

Panel variant

Compact layout

Sidebar layout

Multi-column grid

Nested columns

Methods

update

Notes

​Overview

​Basic usage

​Parameters

​Behavior

​Column scaling

​Minimum width

​Examples

​Panel variant

​Compact layout

​Sidebar layout

​Multi-column grid

​Nested columns

​Methods

​update

​Notes

Overview

Basic usage

Parameters

Behavior

Column scaling

Minimum width

Examples

Panel variant

Compact layout

Sidebar layout

Multi-column grid

Nested columns

Methods

update

Notes