Skip to main content

​
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

​
scale
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.
​
min_width
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.
​
variant
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.
​
visible
bool
default:"True"
If False, column will be hidden.
​
elem_id
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.
​
elem_classes
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.
​
render
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.